JavaScript防抖与节流函数实现

防抖和节流是优化高频事件的两种手段。防抖通过延迟执行，确保事件停止触发后才执行一次回调，适用于搜索输入等场景；节流则保证在指定时间间隔内最多执行一次函数，适合滚动监听等需稳定频率的场景。两者核心区别在于：防抖关注最终状态，节流注重规律执行。根据需求选择可显著提升性能与体验。

在处理高频触发事件时，比如窗口缩放、滚动、输入框输入等，直接执行回调会导致性能问题。防抖（Debounce）和节流（Throttle）是两种常用的优化手段，用来控制函数的执行频率。

防抖（Debounce）

防抖的核心思想是：在事件被触发后，设置一个延迟，如果在这个延迟内事件再次被触发，则重新计时。只有当事件停止触发超过指定时间后，才会执行一次回调。

适用于搜索建议、按钮重复点击、窗口resize等场景。

示例实现：

立即学习“Java免费学习笔记（深入）”；

function debounce(func, delay) {
  let timer;
  return function (...args) {
    const context = this;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

使用方式：

const sayHello = () => console.log("Hello!");
const debouncedSayHello = debounce(sayHello, 500);
window.addEventListener('resize', debouncedSayHello);

节流（Throttle）

节流的核心思想是：规定一个单位时间，在这个时间内，最多只执行一次函数。无论事件触发多少次，函数都会按照固定间隔执行。

适用于滚动加载、鼠标移动、点击提交等需要稳定执行频率的场景。

AI抖音

AI抖音，会思考的抖音

860

查看详情

示例实现（时间戳方式）：

function throttle(func, delay) {
  let previous = 0;
  return function (...args) {
    const now = Date.now();
    const context = this;
    if (now - previous >= delay) {
      func.apply(context, args);
      previous = now;
    }
  };
}

另一种实现（定时器方式）：

function throttle(func, delay) {
  let timer;
  return function (...args) {
    const context = this;
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  };
}

使用方式：

const logPosition = () => console.log(window.scrollY);
const throttledLog = throttle(logPosition, 100);
window.addEventListener('scroll', throttledLog);

区别与选择

防抖强调“最后一次有效”，适合事件频繁触发但只需响应最终结果的场景。比如用户打字结束后再发起搜索请求。

节流强调“规律执行”，适合需要持续响应但不能太频繁的场景。比如页面滚动时监听位置更新。

根据实际需求选择合适的方式，能显著提升性能和用户体验。

基本上就这些，理解原理后可以根据项目需要扩展支持立即执行、取消功能等高级特性。

以上就是JavaScript防抖与节流函数实现的详细内容，更多请关注php中文网其它相关文章！