• 技术文章 >Web开发 >JavaScript

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

    小妮浅浅小妮浅浅2021-08-19 09:52:31原创3330

    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函数节流
    品易云
    上一篇:javascript函数节流是什么 下一篇:javascript函数去抖如何理解

    相关文章推荐

    • javascript寄生式继承的介绍• javascript原始类型是什么?如何鉴别?• javascript引用类型是什么• javascript引用类型的特性• javascript基本类型如何赋值• javascript引用类型的赋值• javascript创建对象的方法• JavaScript有哪些继承的方法• JavaScript如何减少重绘和回流• JavaScript原型链是什么• JavaScript中new函数的原理• javascript中call函数的原理• javascript中bind函数如何使用• javascript函数节流是什么

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网