防抖
定义:规定时间内多次触发只执行一次
如果在200ms内没有再次触发滚动事件,那么就执行函数
如果在200ms内再次触发滚动事件,那么当前的计时取消,重新开始计时
实现:
function debounce(fn,delay){
let timer = null //借助闭包
return function() {
if(timer){
clearTimeout(timer) //进入该分支语句,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时
timer = setTimeout(fn,delay)
}else{
timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时,那么就开始一个计时
}
}
}
window.onscroll = debounce(showTop,1000)
//return的是一个函数, 一直在调用这个return的函数
节流
触发函数后,函数在规定时间后执行,规定时间期间内无法再次触发函数
实现:
//use setTimeout
function throttle(fn,delay){
let valid = true
return function() {
let that = this;
if(!valid){
//休息时间 暂不接客
return false
}
// 工作时间,执行函数并且在间隔期内把状态位设为无效
valid = false
setTimeout(() => {
fn()//箭头函数
// fn.apply(this,arguments)//常规函数
//setTimeout(function(){}
valid = true;
}, delay)
}
}
//use Date
function trotte(fn, time){
let activateTime = 0;
return ()=>{
const current = Date.now();
if(currrent - activateTime > time){
fn();
activateTime = Date.now;
}
}
}
window.onscroll = throttle(showTop,1000)