09.debounce 方法

使用方便有用的方法，以减少代码行数，提高我们的工作效率，增加我们的摸鱼时间。

debounce 方法

创建一个debdeprecated函数，该函数将延迟调用所提供的函数，直到自上次调用该函数后至少经过ms毫秒。

debounce 想必有开发经验前端基本都用过，在这里就不多解释，直接来看实现。

实现

const debounce = (fn, ms = 0) => {
  let timeoutId;
  return function(...args) {
     clearTimeout(timeoutId);
  }
}

说明一下：

• 每次调用debounced函数时，用``clearTimeout()清除当前的待定的timeout，并使用setTimeout()创建一个新的timeout，将调用函数的时间推迟到至少ms毫秒之后。

• 使用function.prototype.apply()将this上下文应用于函数并提供必要的参数。

• 省略第二个参数，ms，将使用默认值0ms。

大白话翻译一下就是，如果当前函数被调用，在指定ms时间内，如果还有函数进来，则清到已定时的函数，重新生成一个新的定时函数。
如果在指定的ms后，没有新的函数进来，则执行已定时的函数。

示例

window.addEventListener(
  'resize',
  debounce(() => {
    console.log(window.innerWidth);
    console.log(window.innerHeight);
  }, 250);
);

说明：当窗口大小不断变化时，控制台不会打印任务东西，直到250m后窗口不变化时才打印。