都2021年了，节流是不是也应该了解一下了

前言

昨天发了有关防抖的文章，很多人都问为啥节流不一起写了呢？这当然是因为昨天那个是上实验课摸鱼写的，节流不没摸出来嘛，嘿嘿。

不过不要慌，节流，它来了！

个人理解：节流的作用与防抖相似，都是为了限制事件的频繁触发。

如何实现节流

实现节流，就要先了解节流的原理。

节流就是，在一定的时间内，只执行一次事件。

或者说是，每隔一段时间，只执行一次事件。

要与防抖做一下区分哦~

防抖是，不管你触发了几次，我只看你最后触发的那一次，并且在若干时间后去执行此次事件。

我了解到的节流，有两种方式，分别是时间戳与定时器。

那么我们来实现一下看看吧~

时间戳

使用时间戳，当触发事件的时候，我们记录当前的时间戳，然后减去之前记录的时间戳(最一开始值一定不要忘了设为 0 )，如果大于设置的时间周期(也就是那个间隔的时间段)，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。

看完是不是觉得很简单？那我们来写一下。

具体的例子还是使用防抖的那个，懒得再写一个啦，嘿嘿~ 将防抖函数换成节流就可

防抖文章链接：都2021年了，不会还有人不知道防抖吧？

function throttle(todo, time) {
    var pre = 0;
    return function() {
        var now = +new Date();
        var that = this;
        if (now - pre > time) {
            todo.apply(that);
            pre = now;
        }
    }
}

使用的话还是跟之前相同：

1	btn.onclick = throttle(shake,3000);

为什么设置3000，当然想让效果看起来明显一些，下面来看看效果吧：

好了好了，别在心里数123了，我们接着往下来。

定时器

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

上代码：

function throttle(todo, time) {
    var timeout,that;
    return function() {
        that = this;
        if (!timeout) {
            timeout = setTimeout(function(){
                timeout = null;
                todo.apply(that)
            }, time)
        }

    }
}