防抖

• 2022 年 5 月 7 日
• 笔记
• js

函数防抖：短时间多次触发同一事件，只执行 最开始 或 最后 一次操作。

function debounce(func, ms = 1000) {
  let timer;
  return function(...args) {
    console.log(args);
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
    }, ms);
  };
}
const task = () => {console.log('run task')};
const debounceTask = debounce(task, 1000);
window.addEventListener('click', debounceTask);  // click 可以换成 scroll

对 debounce 函数返回的匿名函数中 args 参数（这里可忽略）的存在作出说明：
　　const debounceTask = debounce(task, 1000) 其实返回的是匿名函数。

点击页面触发 window.addEventListener(‘click’, debounceTask) 事件，debounceTask 会执行。

这里 debounceTask 没有传递参数，打印 args 会看到有个事件对象，这里的原因是因为：
　　在浏览器中，如果函数执行没有传递参数，会默认有个浏览器事件对象作为参数，如监听的是点击 click 事件的话 args 就是 [PointerEvent]

将 click 换成 scroll，如果在函数不防抖，要执行很多次了~