函数的节流和防抖
在有些情况我们也许会碰到如下场景,监听一个input框的输入事件,但是大多数情况下,我们不是为了监听用户输了什么,而是想知道用户输到什么时候结束了,所以如果实时监听键盘事件,在每次用户敲击键盘的时候去触发一个函数,这样就多了非常多无用的操作,比如window.resize事件
//在你的控制台输入以下代码
window.onresize = ()=> {
console.info('onresize');
};
可以看到 如果我们简单的变化浏览器的大小,控制台会一直打印,这并不是我们需要的,我们往往只需要知道,用户在哪里停下就可以了
结果
1、函数防抖
function throttle(method,context){
clearTimeout(method.timer)
method.timer = setTimeout(function(){
method.call(context)
},500)
}
代码意思很明显,这个方法接受你想防抖的函数以及他的上下文,然后在500ms延时之后执行这个函数,若下一次函数在500ms内调用则清除上个定时器然后在延迟500ms执行,函数防抖有效的防止了一个函数被多次调用,比如onresize,onmouseover和上述的键盘监听事件
再来试试
function fun(){
console.log('onresize')
}
function throttle(method,context){
clearTimeout(method.timer);
method.timer=setTimeout(function(){
method.call(context);
},500);
}
window.onresize = ()=>throttle(fun,window)
把这段代码拷进你的控制台然后在试试,是不是好多了
2、函数节流
相比于防抖,节流就是在让函数在特定的时间内只执行一次
// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
return
}
canRun = false
setTimeout( function () {
console.log("函数节流")
canRun = true
}, 500)
}
用一个flag让该函数在500ms内只执行一次
3、区别
他们都是可以防止一个函数被无意义的高频率调用
区别在于:
函数节流：是确保函数特定的时间内至多执行一次。
函数防抖：是函数在特定的时间内不被再调用后执行。
好了，这就是简单的函数防抖和函数节流，其实开发中大家经常用到，只是没注意罢了。
