两句话说清楚js的节流与防抖

为什么你还不理解js中函数的节流和防抖是干嘛的？不怪你。原因有二，一是这两个名字是直接翻译的英文节流（throttle）、防抖（debounce），光听名字就已经不知所云了。二是太多的文章太啰嗦，让人找不到重点，使阅读变得困难。

为什么需要节流和防抖？
都是为了防止函数频繁的执行。比如：
节流（throttle）解决以下场景：
1.鼠标不断点击触发，mousedown(单位时间内只触发一次)
2.上拉触底加载更多

防抖（debounce）解决以下场景：
1.search搜索联想，用户在不断输入值时，用防抖来节约ajax请求。
2.滚动条滚动的时候触发事件

所以你不用管它是什么意思，记住使用场景就行了。

直接上代码：
节流（throttle）：

// 模拟发送请求的function
const send = (...args) => {
  console.log(...args);
  console.log("发送请求");
};

const throttle = (fn, time) => {
  let timer = null;
  // 这里用到了闭包，被持久化的局部变量就是定时器timer
  return (...args) => {
    if (timer) return;
    fn.call(undefined, ...args);
    timer = setTimeout(() => {
      timer = null;
    }, time);
  };
};
// 模拟点击按钮的function
const click = throttle(send, 5 * 1000);

click(1, 2);

第一次调用点击事件click，timer=null，fn（就是send函数）执行，在5s中之内再次调用click函数，由于timer不为空，就在if那里直接return了。这就实现了上文所提的场景。

防抖（debounce）：

// 模拟发送请求的function
const sendAjax = (...args) => {
  console.log(...args);
  console.log("查找");
};

const debounce = (fn, time) => {
  let timer = null;
  // 这里用到了闭包，被持久化的局部变量就是定时器timer
  return (...args) => {
    if (timer !== null) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.call(undefined, ...args);
    }, time);
  };
};
// 这里是搜索栏变化执行的function
const search = debounce(sendAjax, 3 * 1000);

search(1,2);

当搜索框内容变化的时候执行了search函数，这个时候创建了一个3s的定时器timer，当在3s内用户再次输入内容又会触发search函数，这时候timer不为空，进入if，执行clearTimeout，清除定时器，然后在重新生成一个3s的timer。这样就实现了上文中所说的场景。

弄清楚这个逻辑之后，实现上就很容易了。唯一可能造成困惑的点就是‘ 闭包了 ’，如果有这个困惑，可以看我另一篇关于闭包的文章。