debounce (防抖)

debounce 函数用于创建一个防抖动的函数，以限制函数在连续触发事件时的执行频率。常用于处理用户输入、窗口调整大小、滚动等频繁触发的事件，避免性能问题。

函数调用方式

debounce(func, waitTime = 500, immediate = false)

参数说明

参数名	类型	描述
func	Function	需要防抖动的函数。
waitTime	Number (可选)	延迟执行的时间（单位：毫秒），默认为 500。
immediate	Boolean (可选)	指定是否在延迟开始前立即执行函数，默认为 false。

返回值

返回一个新的防抖动函数，该函数在触发后会延迟执行原函数 func。

异常处理

• 如果 func 不是函数类型，抛出 TypeError：Expected a function。

示例代码

基本用法

const log = () => console.log('Function executed!');
const debouncedLog = debounce(log, 1000);

// 在短时间内多次调用
debouncedLog();
debouncedLog();
debouncedLog(); // 只有最后一次调用会在 1000 毫秒后执行

使用立即执行

const immediateLog = () => console.log('Immediate function executed!');
const debouncedImmediateLog = debounce(immediateLog, 1000, true);

debouncedImmediateLog(); // 立即执行
debouncedImmediateLog(); // 只有前一次的调用会在 1000 毫秒后执行

在事件处理程序中使用

window.addEventListener('resize', debounce(() => {
    console.log('Window resized!');
}, 500));

结论

debounce 函数提供了一种有效的方式来控制频繁触发的事件的执行频率，从而提升性能和用户体验。适用于需要延迟执行的场景，如输入框实时搜索、窗口调整大小等。