防抖和节流

当某些事件频繁的被触发的时候，那么其对应的事件处理函数就会频繁执行，会极大的浪费性能，那么可以通过防抖和节流的方式对其进行控制以节省性能。

函数防抖和节流，都是控制事件触发频率的方法。应用场景有很多，如输入框持续输入，将输入内容远程校验、多次触发点击事件、onscroll、onmousemove、resize等等。

 

防抖

函数防抖，这里的抖动就是执行的意思，而一般的抖动都是持续的，多次的。假设函数持续多次执行，我们希望让它冷静下来再执行。也就是当持续触发事件的时候，函数是完全不执行的，等最后一次触发结束的一段时间之后，再去执行。具体做法是让被频繁触发的任务延迟调用，每次触发都清除上一次的延时器，这样做的缺点是在一定的时间内如果频繁调用的话该任务只能执行一次，不能达到实时触发的效果。

function debounce(func, delay) {
  let timeout
  return function() {
      let that = this
      let args = arguments
      clearTimeout(timeout) // 如果持续触发，那么就清除延时器，延时器的回调就不会执行。 
      timeout = setTimeout(() => { 
          func.apply(that, args) 
      }, delay) 
  } 

}

 

节流

节流的意思是让函数有节制地执行，而不是毫无节制的触发一次就执行一次。什么叫有节制呢？就是事件处理函数触发一次，等待一定的时间之后，才会被允许再次触发。可以理解为当事件处理函数被触发后，就进入冷却期，在冷却期的时候无论如何触发，都不执行，等冷却期结束后，才可以再次被触发。

function throttle(func, delay) {
    let last, timer
    return function () {
        let that = this
        let args = arguments
        let now = Date.now()
        if (last && now < last + delay) {
             clearTimeout(timer)
             timer = setTimeout(function () {
                 last = now
                 func.apply(that, args)
             }, delay)
        } else {
             last = now
             func.apply(that, args)
        }
    }
 }

 

总结

从代码上看，我们发现防抖和节流都是在限制用户的触发频率，它们都巧妙地用了setTimeout，来控制函数执行的时机，优点很明显，可以节约性能，不至于多次触发复杂的业务逻辑而造成页面卡顿。但不同的是：

假设事件处理函数一直在频繁触发的状态下 

防抖的方式会让该事件处理函数一直不触发，等频繁触发结束的一段时间之后仅触发一次  

节流的方式会让该事件处理函数按照我们设定的时间，周期性的触发