promise版函数节流

最新推荐文章于 2024-04-07 15:57:31 发布

Astronomical

最新推荐文章于 2024-04-07 15:57:31 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/strangedbly/article/details/79063357

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用Promise来实现函数节流，特别是在需要确保在特定时间内至少执行一次的场景下，如拖拽操作中避免错过任何中间状态。通过Promise的特性，可以有效地解决此类问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * @function promise版 函数节流 （函数装饰器）
 * @param fn 要节流的函数
 * @param delay 节流时间（毫秒）
 * @param mustRunDelay 必须执行的时间间隔（毫秒）(用于拖拽等，防止闪跳)
 * @return function 处理过的已节流的函数
 */
function throttle(fn, delay, mustRunDelay) {
    let timer = null;
    let tStart;
    let firstRun = true;
    return function(...args) {
        return new Promise((resolve) => {
            const tCurr = Date.now();
            tStart = tStart || tCurr;
            clearTimeout(timer);
            if (mustRunDelay && tCurr - tStart >= mustRunDelay) {
                tStart = tCurr;
                resolve(fn.apply(this, ...args));
            } else if (firstRun) {
                firstRun = false;
                resolve(fn.apply(this, ...args));
            } else {
                timer = setTimeout(() => {
                    firstRun = true;
                    resolve(fn.apply(this, ...args));
                }, delay);
            }
        });
    };
}

参数说明：mustRunDelay 在此时间内必须执行一次，常用于拖拽等在一段时间内必须执行的情况。
假如不设此参数，就可能出现拖拽时从一点闪跳到另一点，没有拖动过程的情况。
样例：

// 原未节流函数
const onClick = function() {
	alert('click button!');
}
// onClickThrottle 就是节流处理过的函数
const onClickThrottle = throttle(onClick, 2000);

promise版 函数节流

promise版函数节流