防抖与节流

参考两位大佬的文章总结:
mp.weixin.qq.com/s/Vkshf-nED…
juejin.cn/post/684490…

1.描述

a. 当鼠标响应resize,scroll等操作时，绑定的函数触发频率会变高，如果该函数稍微复杂一些， 响应速度会远远跟不上触发的频率，从而出现卡顿、延迟、假死等现象。
b. 不断在input文本框中发送请求，非常浪费资源，为了优化性能，使用防抖 or 节流来防止函数被高频调用

2.防抖debounce

原理：在事件被触发n秒后，再去执行回调函数，如果n秒内该事件被重新触发，则重新计时，结果就是 将频繁触发的事件合并为一次，且在最后执行
场景：input输入数据时发送请求
实现：

function debounce(fn, wait) {
  let timer = null;
  return function() {
    let context = this;
    let args = arguments;
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(context, args);
    }, wait);
  };
}

如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件

vue项目采用_.lodash中的_.debounce()：

 getRemote: _.debounce(function() { //返回一个函数
      this.getUserList();
    }, 300),

3.节流 Throttle

原理：规定一个时间n秒内，将触发的事件合并为一次并执行
场景：resize,touchmove移动Dom,上拉列表加载数据
实现：

function throttle(func, wait) {
  let timeout = null;
  return function() {
    let context = this;
    let args = arguments;
    if (timeout) return;

    timeout = setTimeout(() => {
      func.apply(context, args);
      clearTimeout(timeout);
    }, wait);
  };
}

如下图，持续触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle函数

4.总结

防抖的核心：高频操作执行结束，n秒后仅执行一次
节流的核心：每隔一段时间就会执行一次