小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
前言
昨天发了有关防抖的文章，很多人都问为啥节流不一起写了呢？这当然是因为昨天那个是上实验课摸鱼写的，节流不没摸出来嘛，嘿嘿。
不过不要慌，节流，它来了！
个人理解：节流的作用与防抖相似，都是为了限制事件的频繁触发。
防抖文章链接：都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才生效的，但是不知道为什么，这种方式给我的体验感不是很好，可能是因为不是点击的下一刻就有了反馈吧~
这块要加上一个过渡动画，是不是会好很多？
比较
既然有两种方法，那就要说一下他们的区别。
第一种：在例子中可以清楚的看到，点击触发后立即有反馈（执行第一次），连续触发直到过了等待时间才会进行下一次执行，停止触发就不会执行。
第二种：过了等待时间才会执行第一次，停止触发还会执行一次。
在网上看到了这样的形容词：有头无尾和无头有尾，是不是很形象。
最后
啊，终于结束了！还是那句话，可能我想到的或者写的不是很完善，希望大家能够指出，我会及时更正哒。
要是以后的我觉得有地方可以优化，也会回来更新的！
点个赞，我们一起学习进步吧！
