跟着 underscore 学节流

更多内容请参考:我的博客

在上一篇文章中,我们了解了为什么要限制事件的频繁触发,以及如何做限制:

  1. debounce 防抖
  2. throttle 节流

上次已经说过防抖的实现了,今天主要来说一下节流的实现。

节流

节流的原理很简单:

如果你持续触发事件,每隔一段时间,只执行一次事件。

根据首次是否执行已经结束后知否执行,效果有所不同,实现的方式也有所不同。 我们用leading代表首次是否执行,trailing 代表结束后是否再执行一次。

关于节流的实现,有两种主流的实现方式,一种是使用时间戳,一种是设置定时器。

使用时间戳

让我们来看第一种方法:使用时间戳,当触发事件的时候,我们取出当前的时间戳,然后减去之前的时间戳(最一开始值设为0),如果大于设置的时间周期,就执行函数,然后更新时间戳为当前的时间戳,如果小于,就不执行。

看了这个表述,让我们来写第一版的代码:

function throttle(func, wait) {
  var context,args;
  var previous = 0;

  return function() {
     var now = +new Date();
     context = this;
     args = arguments;
     if(now - previous > wait) {
         func.apply(context,args);
         previous = now;
      }
  }
}

例子依然是用讲 debounce 中的例子,如果你要使用:

container.onmousemove = throttle(getUserAction,1000)

效果演示如下:

我们可以看到:当鼠标移入的时候,事件立即执行,每过1s 会执行一次,如果再 4.2s 停止触发,以后不会再执行事件。

使用定时器

接下来,我们讲讲第二种实现方式,使用定时器。

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

function throttle(func, wait) {
  var timeout;
  var previous = 0;

  return function(){
    context = this;
    args = arguments;
    if(!timeout){
       timeout = setTimeout(function(){
         timeout = null;
         func.apply(context, args)
       },wait)
    }
  }
}

为了让效果更加明显,我们设置wait 的时间为 3s,效果演示如下:

我们可以看到:当鼠标移入的时候,事件不会立刻执行,晃了 3s 后终于执行了一次,此后每 3s 执行以下,当数字显示为 3 的时候,立刻移除鼠标,相当于大约 9.2s 的时候停止触发,但是依然会在第 12s 的时候执行一次事件。

所以比较两个方法:

  1. 第一种事件会立刻执行,第二种事件会在 n 秒后第一次执行
  2. 第一种事件停止触发后没有办法再执行事件,第二种事件停止触发后依然会再执行一次事件

双剑合璧

那我们想要一个什么样的呢?

有人就说了:我想要一个有头有尾的!就是鼠标移入能立刻执行,停止触发的时候还能再执行一次!

所以我们综合两者的优势,然后双剑合璧,写一版代码:

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;
}

效果演示如下:

我们可以看到:鼠标移入,事件立刻执行,晃了 3s,事件再一次执行,当数字变成 3 的时候,也就是 6s 后,我们立刻移出鼠标,停止触发事件,9s 的时候,依然会再执行一次事件。

优化

但是我有时也希望无头有尾,或者有头无尾,这个咋办?

那我们设置个 options 作为第三个参数,然后根据传的值判断到底哪种效果,我们约定:

leading:false 表示禁用第一次执行 trailing: false 表示禁用停止触发的回调

我们来改一下代码:

function throttle(func, wait, options) {
    var timeout, context, args, result;
    var previous = 0;
    if (!options) options = {};

    var later = function() {
        previous = options.leading === false ? 0 : new Date().getTime();
        timeout = null;
        func.apply(context, args);
        if (!timeout) context = args = null;
    };

    var throttled = function() {
        var now = new Date().getTime();
        if (!previous && options.leading === false) previous = now;
        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);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining);
        }
    };
    return throttled;
}

取消

在 debounce 的实现中,我们加了一个 cancel 方法,throttle 我们也加个 cancel 方法:

...
throttled.cancel = function() {
    clearTimeout(timeout);
    previous = 0;
    timeout = null;
}
...

注意

我们要注意 underscore 的实现中有这样一个问题:

那就是 leading:false 和 trailing: false 不能同时设置。

如果同时设置的话,比如当你将鼠标移出的时候,因为 trailing 设置为 false,停止触发的时候不会设置定时器,所以只要再过了设置的时间,再移入的话,就会立刻执行,就违反了 leading: false,bug 就出来了,所以,这个 throttle 只有三种用法:

container.onmousemove = throttle(getUserAction, 1000);
container.onmousemove = throttle(getUserAction, 1000, {
    leading: false
});
container.onmousemove = throttle(getUserAction, 1000, {
    trailing: false
});

至此我们已经完整实现了一个 underscore 中的 throttle 函数,恭喜,撒花!

参考文章:https://github.com/mqyqingfeng/Blog/issues/26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端小课堂

页面性能监测之performance

最近,需要对业务上的一些性能做一些优化,比如降低首屏时间、减少核心按钮可操作时间等的一些操作;在这之前,需要建立的就是数据监控的准线,也就是说一开始的页面首屏数...

9210
来自专栏实时流式计算

穿梭时空的实时计算框架——Flink对时间的处理

Flink对于流处理架构的意义十分重要,Kafka让消息具有了持久化的能力,而处理数据,甚至穿越时间的能力都要靠Flink来完成。

8720
来自专栏web秀

JavaScript中如何给localStorage设置一个有效期?

从我们接触前端起,第一个熟悉的存储相关的Cookie或者来分析我们生活中密切相关的淘宝、物流、闹钟等事物来说起吧,

20130
来自专栏MySQL技术

explicit_defaults_for_timestamp参数详解

explicit_defaults_for_timestamp 系统变量决定MySQL服务端对timestamp列中的默认值和NULL值的不同处理方法。此变量自...

9840
来自专栏纯洁的微笑

为什么分布式一定要有Redis?

考虑到绝大部分写业务的程序员,在实际开发中使用 Redis 的时候,只会 Set Value 和 Get Value 两个操作,对 Redis 整体缺乏一个认知...

9320
来自专栏这里只有VxWorks

Component之时间戳

在VxWorks里,系统时钟的频率默认都是60。当然可以改的高一些(很多项目会用1000),但要考虑板子的性能,不建议改的太高

8340
来自专栏Java程序猿部落

面试官常问的Nginx的那几个问题?

Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器

10120
来自专栏LINUX阅码场

Linux fork那些隐藏的开销

fork是一个拥有50年历史的陈年系统调用,它是一个传奇!时至今日,它依旧灿烂。

16550
来自专栏web秀

JavaScript中Date对象的那些事儿

任何事情都离不开时间,太阳每天升起的时间,每天你上班的时间,中午吃饭时间等等。在编程生涯中,无时无刻都有一个时间来引导,如数据创建时间(createTime),...

7720
来自专栏code秘密花园

花椒 Web 端多路音频流播放器研发

语音交友直播间 Web 端使用 WebRTC (Web Real-Time Communications) 实现多路音频流传输的播放。但由于云服务等原因,看播端...

17820

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励