JavaScript中防抖和限流

在前端开发中，经常需要处理一些用户频繁触发的操作，例如避免连续点击导致事件重复提交，或在搜索输入框中输入文字时，用户停止输入后才触发模糊搜索提示。为了解决这些问题，我们可以使用防抖（Debounce）和限流（Throttle）技术。它们是 JavaScript 中常用的优化方法，能够显著提高页面性能，尤其是在处理诸如滚动、窗口调整大小等高频率事件时。

防抖函数（Debounce）

防抖函数的主要目的是避免某个函数在短时间内被多次调用。当一个事件频繁触发时，防抖函数会等待一段指定的时间再执行回调函数。如果在等待期间事件再次触发，计时器会重置，重新开始计时。最终，只有在事件停止触发后的这段时间内不再有新触发时，回调函数才会执行。

防抖的核心思想是将频繁的操作合并为一次操作，避免不必要的函数调用。这种技术非常适用于处理用户在输入框中输入文字时，只有在用户停止输入并稳定一段时间后才执行搜索操作的场景。这可以有效减少不必要的请求次数，提高应用的性能和响应速度。

//简单实现
function debounce(func, wait) {
    let timeout;

    return function(...args) {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), wait);
    };
}

//使用
window.addEventListener('resize', debounce(() => {
    console.log('Window resized');
}, 300));

在这个示例中，窗口的 resize 事件会被防抖处理，只有在停止调整大小后的 300 毫秒内没有再次触发时，才会输出 "Window resized"。

限流函数（Throttle）

限流则是控制函数在一段时间内只能执行一次，无论这个事件多么频繁触发。在指定的时间间隔内，限流函数会确保事件处理函数最多执行一次。这种技术特别适合处理如滚动、鼠标移动等需要控制执行频率的场景。

//简单实现
function throttle(func, limit) {
    let lastFunc;
    let lastRan;

    return function(...args) {
        const context = this;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function() {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
}
//使用
window.addEventListener('scroll', throttle(() => {
    console.log('Scrolling');
}, 1000));

在这个示例中，滚动事件每 1000 毫秒会触发一次 "Scrolling" 的输出，尽管用户可能一直在滚动页面。

两者区别

防抖：在事件停止触发后一段时间后才执行函数，适用于处理频繁触发的场景，确保事件处理函数只执行一次。

限流：在一个固定的时间间隔内执行函数，无论事件是否频繁触发，适用于需要控制执行频率的场景。

理解并使用防抖和限流可以帮助开发者优化代码性能，特别是在处理用户交互频繁的情况下，比如在三维可视化平台中，当鼠标缩放时，鼠标图标就变为缩放效果，暂停则变为指针的效果，则可以通过限流函数减少鼠标图标的无效切换。