JavaScript进阶之路系列（三）：节流防抖

问题提出： 假如你要提交一个表单，你点击了按钮，出发了提交操作。这时候，你的网络不太好，提交的请求还没得到返回的时候，你又点击了一次按钮，提交了两次，怎么办，又点击了一下，提交了三次，怎么办？

概念

函数防抖（debounce）当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。

函数节流（throttle）预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。

函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

比如如下的情况：window对象的resize、scroll事件拖拽时的mousemove事件文字输入、自动完成的keyup事件。

区别

可以拿我们平时坐电梯为例来形象地表述二者的区别:

函数防抖：如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。

函数节流 ：保证如果电梯第一个人进来后，10秒后准时运送一次，这个时间从第一个人上电梯开始计时，不等待，如果没有人，则不运行。

应用场景

函数防抖的应用场景

连续的事件，只需触发一次回调的场景有：搜索框搜索输入。只需用户最后一次输入完，再发送请求手机号、邮箱验证输入检测窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

函数节流的应用场景

间隔一段时间执行一次回调的场景有：滚动加载，加载更多或滚到底部监听谷歌搜索框，搜索联想功能高频点击提交，表单重复提交。

实现

函数防抖:

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)

函数节流:

相比于防抖,节流就是在让函数在特定的时间内只执行一次。

// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
  return
}
canRun = false
setTimeout( function () {
    console.log("函数节流")
    canRun = true
  }, 500)
}

总结

其实函数节流与函数防抖的原理非常简单，巧妙地使用 setTimeout 来存放待执行的函数，这样可以很方便的利用 clearTimeout 在合适的时机来清除待执行的函数。

使用函数节流与函数防抖的目的，就是为了节约计算机资源。