防抖函数和节流函数的实现，这个是在某保险公司笔试题遇到的。

最新推荐文章于 2024-07-11 16:38:48 发布

麦田上的字节

最新推荐文章于 2024-07-11 16:38:48 发布

阅读量975

点赞数

CC 4.0 BY-SA版权

分类专栏：面试系列高级前端全栈教程系列文章标签：防抖节流

未经博主同意，禁止转载

本文链接：https://blog.csdn.net/weixin_41937552/article/details/108768778

高级前端全栈教程系列同时被 2 个专栏收录

145 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

面试系列

47 篇文章

订阅专栏

本文探讨了在处理高频事件如scroll和resize时如何优化性能，通过防抖和节流技术来限制事件处理函数的执行次数。防抖技术合并多次触发为一次，而节流则保证在一定频率内执行。文中提供了防抖和节流函数的实现示例，以帮助理解其工作原理。

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

scroll 事件本身会触发页面的重新渲染，同时 scroll 事件的 handler 又会被高频度的触发, 因此事件的 handler 内部不应该有复杂操作，例如 DOM 操作就不应该放在事件处理中。

针对此类高频度触发事件问题（例如页面 scroll ，屏幕 resize，监听用户输入等），下面介绍两种常用的解决方法，防抖和节流。

防抖（Debouncing）

防抖技术即是可以把多个顺序地调用合并成一次，也就是在一定时间内，规定事件被触发的次数。

通俗一点来说，看看下面这个简化的例子：

// 简单的防抖动函数
function debounce(func, wait, immediate) {
    // 定时器变量
    var timeout;
    return function() {
        // 每次触发 scroll handler 时先清除定时器
        clearTimeout(timeout);
        // 指定 xx ms 后触发真正想进行的操作 handler
        timeout = setTimeout(func, wait);
    };
};
 
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
    console.log("Success");
}
 
// 采用了防抖动
window.addEventListener('scroll',debounce(realFunc,500));
// 没采用防抖动
window.add