函数的节流和防抖

在有些情况我们也许会碰到如下场景,监听一个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、区别

他们都是可以防止一个函数被无意义的高频率调用
区别在于:

函数节流：是确保函数特定的时间内至多执行一次。
函数防抖：是函数在特定的时间内不被再调用后执行。

好了，这就是简单的函数防抖和函数节流，其实开发中大家经常用到，只是没注意罢了。