防抖：解决频繁操作的小技巧！

📝 使用场景

• 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
• 调整浏览器窗口大小时，resize次数过于频繁，造成计算过多，此时需要一次到位，就需要用到防抖
• 搜索框搜索输入，不需要每次输入一个字的时候就进行搜索，而且等待没有再次输入的时候就返回结果，需要防抖

📐 实现原理

• 一定时间内，只有最后一次操作，再过waitTime毫秒后才执行函数

🚄 实现

说明

• 考虑到后面这个东西会常用，因此我这里通过封装成独立一个JS文件。
• 文件名称：debounce.js

✨方法封装✨

function debounce(func, waitTime = 500, immediate = false) {
    // 类型检查，确保 func 是一个函数
    if (typeof func !== 'function') {
        throw new TypeError('Expected a function');
    }

    let timeout = null; // 将 timeout 变量放在函数内部

    return function(...args) {
        // 清除定时器
        if (timeout !== null) clearTimeout(timeout);

        // 立即执行逻辑
        if (immediate) {
            const callNow = timeout === null; // 只有在没有定时器时才执行
            timeout = setTimeout(() => {
                timeout = null; // 清理定时器
            }, waitTime);

            if (callNow) {
                func.apply(this, args); // 立即执行函数
            }
        } else {
            // 设置定时器，延迟执行函数
            timeout = setTimeout(() => {
                func.apply(this, args); // 等待 waitTime 毫秒后执行函数
            }, waitTime);
        }
    };
}

export default debounce;

✨参数说明✨

参数	说明	类型
func	需要执行的回调函数	Function
waitTime	延长执行函数的时间	Number
immediate	是否立即执行	Boolean

更多方法详见，苏宛墨の小破站