189 8069 5689

JavaScript中节流的示例分析-创新互联

小编给大家分享一下JavaScript中节流的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联建站坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站建设、网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的昆都仑网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

前言

我们来聊一聊节流——另一个优化函数的思想。

我们还是以移动事件举例


    
    
    
    Document
    
    


    

它的效果是这样：

JavaScript中节流的示例分析

一、核心和基本实现

节流的原理很简单：如果你持续触发某个事件，特定的时间间隔内，只执行一次。

关于节流的实现，有两种主流的实现方式：

  1. 时间戳思路

  2. 定时器思路

1.1 时间戳思路

顾名思义，通过两个时间戳来控制时间间隔，当触发事件的时候：

  1. 我们取出当前的时间戳now；

  2. 然后减去之前执行时的时间戳(首次值为 0 )prev；

  3. 如果大now - prev > wait，证明时间区间维护结束，执行指定事件，更新prev；

根据这一思路，我们就可以实现第一版代码了：

oWrapper.onmousemove = throttle(moveAction, 1000);function throttle(func, wait) {
    var _this, arg;
    var prev = 0; // 上一次触发的时间，第一次默认为0

    return function () {
        var now = Date.now(); // 触发时的时间
        _this = this;
        if (now - prev > wait) {
            func.apply(_this, arg); // 允许传入参数，并修正this
            prev = now; // 更新上一次触发的时间
        }
    }}

来看看借助它，效果是什么样的：

JavaScript中节流的示例分析

我们可以看到：

  1. 当鼠标移入的时候，事件立刻执行

  2. 每过 1s 会执行一次，且移动2.5s会执行2次，意味着动作停止后不会再执行。

1.2 定时器思路

利用定时器来保证间隔时间内事件的触发次数

  1. 创建定时器timer，记录当前是否在周期内；

  2. 判断定时器是否存在，若存在则直接结束，否则执行事件；

  3. wait时间之后再次执行，并清掉定时器；

当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。

function throttle(func, wait) {
    var _this, arg;
    var timer; // 初始化
    return function () {
        _this = this; // 记录this
        arg = arguments; // 记录参数数组
        if (timer) return; // 时候未到
        timer = setTimeout(() => {
            func.apply(_this, arg); // 允许传入参数，并修正this
            timer = null;
        }, wait);
    }}

来看看借助它，效果是什么样的：

JavaScript中节流的示例分析

但是，我们可以看到：

  1. 当鼠标移入的时候，事件不会立刻执行;

  2. 鼠标定制后wait间隔后会执行一次

1.3 两种思路的区别

时间戳定时器
“起点”立即执行n 秒后执行
“终点”停止后不会执行停止会再执行一次

二、节流进阶

结合两种思想完成一个可以立即执行，且停止触发后再执行一次的节流方法：

// 第三版function throttle(func, wait) {
    var timeout, context, args, result;
    var previous = 0;

    var later = function() {
        previous = +new Date();
        timeout = null;
        func.apply(context, args)
    };

    var throttled = function() {
        var now = +new Date();
        //下次触发 func 剩余的时间
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
         // 如果没有剩余的时间了或者你改了系统时间
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(context, args);
        } else if (!timeout) {
            timeout = setTimeout(later, remaining);
        }
    };
    return throttled;}

效果演示如下：

JavaScript中节流的示例分析

我在看代码的时候，我是反复打印数据才理解为什么会这样做，一起加油～

以上是“JavaScript中节流的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


网页名称：JavaScript中节流的示例分析-创新互联
URL链接：http://cdxtjz.com/article/ddhdep.html

其他资讯