实现js节流函数throttle

最新推荐文章于 2024-08-21 15:43:48 发布

北京的雾霾天

最新推荐文章于 2024-08-21 15:43:48 发布

阅读量426

点赞数 1

分类专栏： js 文章标签： JavaScript 节流定时器函数调用定时任务

本文链接：https://blog.csdn.net/hbxtlhx/article/details/115320571

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

两个timer实现js节流函数

用两个timer做一个函数调用节流器，不需要更多的逻辑，保证第一次调用和每间隔timeout时间后被触发和最后一次的调用被触发；

// js 节流函数实现
function throttle(func, timeout) {
    let headTimer = null;
    let tailTimer = null;
    let context = null;
    let args = null;
    
    return function () {
        context = this;
        args = arguments;
        //lihx 保证第一次及后续timeout时间后依次触发调用；
        if (!headTimer) {
            headTimer = setTimeout(() => {
                func.apply(context, args);
                headTimer = null;
            }, timeout);
        } else {
            //lihx 保证最后一次调用被触发，但不保证headTimer与tailTimer有timeout时间间隔；
            if (tailTimer) {
                clearTimeout(tailTimer);
            }
            tailTimer = setTimeout(() => {
                func.apply(context, args);
                tailTimer = null;
            }, timeout);
        }
    }
}