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函数节流实现的两种方式,希望对大家有所帮助。更多Javascript学习指路:Javascript

推荐操作环境:windows7系统、jquery3.2.1版本,DELL G3电脑。

以上是 javascript函数节流实现的两种方式 的全部内容, 来源链接: utcz.com/z/545115.html

回到顶部