Javascript 函数防抖和节流

最新推荐文章于 2025-06-12 17:10:21 发布

原创最新推荐文章于 2025-06-12 17:10:21 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Javascript 函数防抖和节流

Javascript 函数防抖和节流专栏收录该内容

1 篇文章

订阅专栏

本文介绍了JavaScript中的防抖(debounce)和节流(throttle)技术，这两种技术可以有效减少高频率事件触发导致的性能问题。通过具体代码示例，展示了如何实现防抖和节流函数，并解释了它们的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防抖 debounce

例如 window的scroll、resize事件等是触发比较高事件，频繁的触发和执行会大大的消耗内存，降低浏览器性能。

定义和实现：

function count() {
        content.innerHTML = num++;
};
//定义：
debounce(fn,wait)
//实现：
function debounce(count, wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout); 
        timeout = setTimeout(() => {
          count.apply(context, args)
        }, wait);
    }
}

xxx.onmousemove = debounce(count,1000);

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次。
如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

节流（throttle）所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

function throttle(count, wait) {
    var previous = 0;
    return function() {
        let now = Date.now();
        let context = this;
        let args = arguments;
        if (now - previous > wait) {
            count.apply(context, args);
            previous = now;
        }
    }
}
xxx.onmousemove = throttle(count,1000);