js节流&防抖

1. 防抖

在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。

1.1 应用场景：

• (1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；
• (2) window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次；

1.2 代码实现

const debounce = function(fun, delay) {
  return function (args) {
    //获取函数的作用域和变量
    let that = this;
    let _args = args;
    //每次事件被触发，都会清除当前的timeer，然后重写设置超时调用
    clearTimeout(fun.id);
    fun.id = setTimeout(function () {
      fun.call(that, _args);
    }, delay);
  };
};

2. 节流

规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

2.1 应用场景

• (1)鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
• (2)在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次请求，而不是在用户停下滚动页面操作时才去请求数据；
• (3)监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；

2.2 代码实现

const throttle = function(fun, delay) {
  let last, deferTimer;
  return function (args) {
    let that = this;
    let _args = arguments;
    let now = +new Date();
    if (last && now < last + delay) {
      clearTimeout(deferTimer);
      deferTimer = setTimeout(function () {
        last = now;
        fun.apply(that, _args);
      }, delay);
    } else {
      last = now;
      fun.apply(that, _args);
    }
  };
}

3. 示例

// scroll事件加入防抖机制
const scrollFun = debounce(() => {
  console.log("scroll----", window.pageYOffset);
}, 2000);
window.addEventListener("scroll", scrollFun);
// ...