关于javascript:实现debounce和throttle函数

52次阅读

共计 1571 个字符,预计需要花费 4 分钟才能阅读完成。

1. 该函数间断调用时,闲暇工夫必须大于或等于函数定义的 wait 工夫,工作才会执行的函数叫防抖 (debounce) 函数
2. 该函数间断调用时,每隔一段时间,至少执行一次工作的函数叫节流(throttle)函数。

这里模仿 lodash 的防抖函数 _.debounce(func, [wait=0], [options=]),先说下 lodash 防抖函数的入参 options 的配置项:

options.leading 与 | 或 options.trailing 决定提早前后如何触发(注:是 先调用后期待 还是 先期待后调用)。func 调用时会传入最初一次提供给 debounced(防抖动)函数 的参数。后续调用的 debounced(防抖动)函数返回是最初一次 func 调用的后果。
留神: 如果 leading 和 trailing 选项为 true, 则 func 容许 trailing 形式调用的条件为: 在 wait 期间屡次调用防抖办法。

简略点说 lodash 的防抖函数,当 options.leading 为 true、options.trailing为 false 时,就要咱们平时所须要应用的节流函数用法,当 options.leading 为 false、options.trailing为 true 时就是咱们平时所须要应用的防抖函数用法,自己本人模仿实现了一下,代码如下

/**
 * 
 * @param {function} func 须要执行的防抖函数
 * @param {number} wait 等待时间毫秒
 * @param {object} options {leading: 为 true 示意在等待时间开始前执行防抖函数,trailing: 为 true 示意在等待时间开始之后执行防抖函数}
 */
function debounce(func, wait = 500, options) {if (typeof func !== "function") throw new Error("func must be function");

    let timer = null;
    const {
        leading = false,
        trailing = true
    } = options || {}

    const res = function (...argus) {
        const self = this;

        if (!leading && trailing) {clearTimeout(timer);
            timer = setTimeout(() => {func.apply(self, argus);
                timer = null;
            }, wait)
        }

        if (leading){if (!timer) {func.apply(self, argus);
                timer = setTimeout(() => {timer = null}, wait)
            } else {
                // 如果存在定时器,阐明在 wait 时间段内执行过防抖函数
                if (trailing){
                    // 如果为 true,则期待 wait 工夫后执行防抖函数
                    clearTimeout(timer);
                    timer = setTimeout(() => {func.apply(self, argus);
                        timer = null
                    }, wait)
                }
            }

        }
        
        // 设置防抖函数的后置勾销性能
        res.cancel = function () {if (timer) {clearTimeout(timer);
                timer = null;
            }
        }

        // 设置防抖函数立刻执行性能
        res.flush = function () {if (timer) {clearTimeout(timer);
                timer = null;
                func.apply(self, argus);
            }
        }
    }

    return res;
}

这里特地留神,自己编写的内置 cancel、flush 办法只对 options.leading=false 和 options.trailing=true 时无效,对于其余状况下临时还没做逻辑判断解决,如各位小伙伴理解其它规定机制,能够给自己点意见,哈哈哈!

正文完
 0