JS - 函数防抖封装

最新推荐文章于 2025-03-10 10:45:49 发布

「已注销」

最新推荐文章于 2025-03-10 10:45:49 发布

阅读量841

点赞数 1

分类专栏： JavaScript web前端开发文章标签：函数防抖封装

本文链接：https://blog.youkuaiyun.com/weixin_44713430/article/details/102182142

版权

web前端开发同时被 2 个专栏收录

122 篇文章

订阅专栏

JavaScript

63 篇文章

订阅专栏

函数防抖是一种优化手段，用于限制高频操作中的函数调用次数，提升网页性能。适用于oninput、onmousemove、onscroll、onresize等场景。本文将介绍其作用并提供封装示例。

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

函数防抖[debounce]

函数防抖是优化高频率执行js代码的一种手段
可以让被调用的函数在一次连续的高频操作过程中只被调用一次

函数防抖作用

减少代码执行次数, 提升网页性能

函数防抖应用场景

oninput / onmousemove / onscroll / onresize等事件

封装

function debounce(fn, delay) {
    let timerId = null;
    return function () {
        let self = this;
        let args = arguments;
        timerId && clearTimeout(timerId);
        timerId = setTimeout(function () {
            fn.apply(self, args);
        }, delay || 1000);
    }
}