57uv6Z6g55qE5Y2a5a6i

MS4wLjABAAAA5qMD8Gzdcgq7HXUOviKB59i0-ybJ59jJvNzyaPt5XOsVNqP6DU7WLcoAXvdxvYdp💗
本站所有文章仅作技术研究，请勿非法破坏，请遵守相关法律法规，后果自负

【笔记】JS实现防抖和节流

发表于 2025-06-28 更新于 2025-12-26 阅读次数：

前言

JS实现防抖和节流

防抖（Debounce）

指定一个时间间隔，在时间间隔内反复触发的事件，只有最后一次会被执行，其他的事件都会被忽略

function debounce(fn, delay) {
  let lastTimer = null;
  return function () {
    if (lastTimer) clearTimeout(lastTimer);
    lastTimer = setTimeout(() => {
      fn();
      lastTimer = null;
    }, delay);
  }
}

const handleClick = debounce(() => {
  console.log("clicked");
}, 1000);

document.querySelector("#app").addEventListener("click", handleClick);

节流（Throttle）

指定一个时间间隔，在时间间隔内反复触发的事件，每一次时间间隔内最多只会执行一次，其他的事件都会被忽略

function throttle(fn, interval) {
  let startTime = Date.now();
  return function () {
    const nowTime = Date.now();
    const waitTime = interval - (nowTime - startTime);
    if (waitTime <= 0) {
      fn();
      startTime = nowTime;
    }
  }
}

const handleClick = throttle(() => {
  console.log("clicked");
}, 1000);

document.querySelector("#app").addEventListener("click", handleClick);

完成

0%