一文带你深入了解JavaScript节流

前言

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

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

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

防抖文章链接：都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;
        }
    }
}

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

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

    }
}

看看效果：

可以看出，它是过了3s才生效的，但是不知道为什么，这种方式给我的体验感不是很好，可能是因为不是点击的下一刻就有了反馈吧~

这块要加上一个过渡动画，是不是会好很多？

比较

既然有两种方法，那就要说一下他们的区别。

第一种：在例子中可以清楚的看到，点击触发后立即有反馈（执行第一次），连续触发直到过了等待时间才会进行下一次执行，停止触发就不会执行。

第二种：过了等待时间才会执行第一次，停止触发还会执行一次。

在网上看到了这样的形容词：有头无尾和无头有尾，是不是很形象。

最后

啊，终于结束了！还是那句话，可能我想到的或者写的不是很完善，希望大家能够指出，我会及时更正哒。

要是以后的我觉得有地方可以优化，也会回来更新的！

点个赞，我们一起学习进步吧！