防抖&节流 概念 实现原理

防抖 rebounce

将多次执行变为最后一次执行

原理：闭包(保存一个变量为null，把延时器赋给这个变量)。在延时器的n秒内，每次执行前 清除定时器，添加新的延时器，达到重置时间的效果

菜鸟版输入框防抖：

// 输入框防抖
  function debounce(wait, immediate, msg) {
    let timeout;
    return function () {
      // const context = this;
      // const args = [...arguments];
      if (timeout) clearTimeout(timeout);
      if (immediate) {
        const callNow = !timeout;
        timeout = setTimeout(() => {
          timeout = null;
        }, wait);
        if (callNow) message.warning(msg);
      } else {
        timeout = setTimeout(() => message.warning(msg), wait);
      }
    };
  }
  const dNumber = debounce(800, true, '请输入数字'); - 只调用一次该方法

调用：

dNumber(); - 在每次都要提示的地方调用该方法

节流 throttle

将多次执行变为每隔一段时间执行

通过闭包保存一个标记，在开始时通过标记判断当前是否有等待执行的延时器，如果有，就直接return出来（标记要在延时器的回调函数中，重置为初始值）

参考博客