wwbsr/utils/funcs/debounce.js

/**
 *  函数防抖模块封装
 * @author lautin
 * @created 2019-11-20 18:44:32
 */


/**
 * 防抖函数，在一个时段内反复触发时 更新定时器为最后一次延迟执行
 * 该操作欠缺的地方在于 延迟执行，响应比较慢 最好是先执行
 * @param {function} func 事件回调函数
 * @param {number} wait 延迟等待时间，建议100-300ms左右
 */
function debounceA(func, wait) {
    // 初始化定时器为空
    let timer = null;
    // 返回一个防抖的闭包函数，使用闭包来持久存储定时器
    return function () {
        const context = this, // this为事件源DOM
            args = arguments; // arguments包含event
        // 如果已有定时器 则取消上次的任务
        if (timer) clearTimeout(timer);
        // 更新定时器，本次（最后）任务n毫秒后触发
        timer = setTimeout(() => {
            // 还原事件回调函数触发时的环境
            func.apply(context, args);
        }, wait);
    }
}

/**
 * 防抖函数，在一个时段内反复触发时 更新定时器为最后一次延迟执行
 * 该方法 先执行 后延迟 响应灵敏更高
 * @param {function} func 事件回调函数
 * @param {number} wait 延迟等待时间，建议100-300ms左右
 */
function debounceB(func, wait) {
    let timer = null;
    return function () {
        const context = this,
            args = arguments;

        // 首先取消中间的定时器，重新开始计时
        if (timer) clearTimeout(timer);

        //先加载本次任务，
        if (!timer) func.apply(context, args);

        // 再进行定时器控制
        timer = setTimeout(() => {
            timer = null;
        }, wait);
    }
}

export default function debounce(func, wait, immediate = false) {
    return immediate ? debounceB(func, wait) : debounceA(func, wait);
}