防抖:
触发高频函数事件后,n秒内函数只能执行一次,如果在n秒内这个事件再次被触发的话,那么会重新计算时间。
节流:
所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率
先来一个例子
监听 滑轮滚动距离 回到顶部的操作
function showtop() { var scrollTop = document.body.scrollTop|| document.documentElement.scrollTop; console.log("滚动条位置"+scrollTop) ; }
window.onscroll = showtop()
只要一滚动 就会产生许多滚动事件 也就会执行许多次代码 非常消耗内存使用率
所以这里可以使用防抖 防抖定义为让某个时间期限内 时间处理函数执行一次
防抖的代码
function debounce(fn,delay){
let timer = null;
return function(){
if(timer){
clearTimeout(timer);
}
timrer = setTimeout(fn,delay);
}
}
最后再调用这个函数即可
window .onscroll = debounce(showTop,1000)
当触发以后 一秒后 打印这个距离 只执行一次 所以也就实现了防抖
节流 根据上面的触发 当用户没有停止 一直拉动滚动条 也就不会执行
技能冷却时间 函数执行一次 某个时间段失效
代码如下
function throttle(fn,delay){
}
{let vlid =true
return function(){
if(!vlid){
return false;
}else{
valid =fasle;
setTimeout(function(){
fn();
valid = true
},1000)}
}
}