JavaScript 函数防抖

语言:

JavaScript

42 浏览

0 收藏

2025年9月19日

代码实现

JavaScript

function debounce(fn,delay){
    let timerId;
    return function(...args){
        clearTimeout(timerId);
        timerId=setTimeout(()=>{
            fn.apply(this,args);
        },delay);
    };
}

//usage
const d_layout = debounce(layout,500);
window.onresize = d_layout;

防抖函数是 JavaScript 中用于优化高频、耗时操作的核心工具，其核心逻辑是延迟函数执行 + 取消重复延迟，确保短时间内多次触发的函数仅在最后一次触发后，等待指定延迟时间再执行，避免无效调用导致的性能损耗。

它的工作原理可通过 “电梯关门” 类比理解：电梯开门后默认等待固定时间（如 2 秒）再关门，若等待期间有新乘客进入（对应函数新触发），则取消原等待计时并重新开始倒计时；仅当倒计时结束后无新触发，才执行 “关门”（对应函数执行）。

#防抖

片段说明

适用场景

高频触发：短时间内函数被反复调用（如窗口resize、输入框input事件），不限定于 DOM 事件，非 DOM 环境（如 Node.js）的高频函数调用也适用。
函数耗时：被调用函数属于 CPU 密集型（如页面布局计算、大量 DOM 操作，会引发回流 / 重绘）或 IO 密集型（如网络请求、文件读写）操作，简单运算（如 1+1）无需防抖。
结果以最后一次为准：短时间内多次调用的结果中，仅需保留最后一次调用的结果（如窗口调整后，仅需最终尺寸对应的布局，中间过程的布局无意义）。

JavaScript 函数防抖

代码实现

片段说明

适用场景

推荐代码片段

Node.js读取和写入文件例子

SQL过滤和排序数据

Hello, World

评论