【说站】javascript函数节流实现的两种方式

很酷的站长

发布于 2022-11-24 11:45:16

5910

文章被收录于专栏：站长的编程笔记站长的编程笔记

javascript函数节流实现的两种方式

1、用时间戳判断是否已到回调执行时间，记录上次执行时间戳，然后每次触发事件时执行回调，回调判断当前时间戳距离上次执行时间戳的时间间隔是否为*s。

如果是，则执行，并更新上次执行时间戳，如此循环。

var throttle = function(delay, action) {
    var last = 0;
    return function() {
        var curr = new Date();
        if (curr - last > delay) {
            action.apply(this, arguments);
            last = curr;
        }
    }
}

2、使用定时器。

比如，当scroll事件刚触发时，打印一个hello world ，然后设置一个1000ms的定时器，此后每次触发scroll事件，触发回调，如果已经存在定时器，则回调不执行方法，知道定时器出发，handler被清除，然后重新设置定时器。

var throttle = function(delay, action) {
    var timeout;
    var later = function () {
        timeout = setTimeout(function(){
            clearTimeout(timeout);
            // 解除引用
            timeout = null;
        }, delay);
    };
    later();
    if (!timeout) {
        action.apply(this, arguments);
        later();
    }
}

以上就是javascript函数节流实现的两种方式，希望对大家有所帮助。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

unix

javascript

【说站】javascript函数节流实现的两种方式

【说站】javascript函数节流实现的两种方式

javascript函数节流实现的两种方式

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐