如何通过JavaScript实现自定义防抖和节流功能？

防抖（debounce）和节流（throttle）是两种常用的性能优化技术。防抖是指在一定时间内，只执行一次函数；节流是指每隔一定时间，执行一次函数。在JavaScript中，可以通过以下方式实现：，，``

javascript，// 防抖，function debounce(func, wait) {，  let timeout;，  return function () {，    clearTimeout(timeout);，    timeout = setTimeout(() => {，      func.apply(this, arguments);，    }, wait);，  };，}，，// 节流，function throttle(func, wait) {，  let previous = 0;，  return function () {，    let now = Date.now();，    if (now previous > wait) {，      func.apply(this, arguments);，      previous = now;，    }，  };，}，

防抖（Debounce）

（图片来源网络，侵删）

防抖是一种在一定时间内，多次触发同一事件时，只让事件处理函数执行一次的优化手段，如果在这段时间内再次触发此事件，则重新计算时间。

实现原理：

1、设置一个定时器，在指定延迟时间后执行函数。

2、如果在该延迟时间段内再次触发事件，则取消当前的定时器，重新开始计时。

代码示例：

（图片来源网络，侵删）

function debounce(func, wait) {
    let timeout;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeout); // 清除之前的定时器
        timeout = setTimeout(function() {
            func.apply(context, args); // 在指定延迟后执行函数
        }, wait);
    };
}

节流（Throttle）

节流是用于保证一定时间内，事件处理函数的执行次数不超过设定的次数。

实现原理：

1、设置一个定时器，每隔一定时间执行一次函数。

2、如果在这个时间段内触发了事件，不立即执行，等到下一个时间段开始再执行。

（图片来源网络，侵删）

代码示例：

function throttle(func, wait) {
    let previous = 0;
    return function() {
        const now = Date.now();
        if (now previous > wait) {
            func.apply(this, arguments);
            previous = now;
        }
    };
}

应用场景对比

防抖：适用于那些需要“最后一次操作”才有意义的场景，如输入框搜索提示、窗口大小调整等。

节流：适用于需要控制事件发生频率的场景，如滚动事件监听、频繁点击按钮等。