js史上最精简!防抖节流(你的比我精简，算我输)

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

作为前端开发人员，相信大家对防抖和截流早已是十分熟悉了，初次听说这个玩意儿的时候我的第一反应是

防抖，防止抖动？节流，节约流水？？

于是乎百度了一波，终于弄懂。 就是，为了防止事件在短时间内被多次触发的两种解决方案。网上巴拉巴拉一堆说法， 总结：

防抖：你狂点按钮也没有，等你冷静下来事件才会触发。

节流：游戏里面的技能冷却功能。

好的，然后呢？？

然后呢？当然是百度一下ctrl+c，ctrl+v完成功能点啊，自己写？？不存在的

于是乎我找了一大堆案例总结几个例子大概是：

防抖：

//例子1
function debounce(fn,delay=200){
 let timer = null;
 return function(){
 if(timer) clearTimeout(timer);
 timer = setTimeout(()=>{
 fn.apply(this,arguments);
 timer = null;
 },delay);
 }
}
//例子2
function debounce(func, wait) {
 let timeout;
 return function () {
 let context = this;
 let args = arguments;
 if (timeout) clearTimeout(timeout);
 timeout = setTimeout(() => {
 func.apply(context, args)
 }, wait);
 }
}

节流：

//时间戳版function throttle(func, wait) {
 let previous = 0;
 return function() {
 let now = Date.now();
 let context = this;
 let args = arguments;
 if (now - previous > wait) {
 func.apply(context, args);
 previous = now;
 }
 }
}
throttle(count,1000);
//定时器版
function throttle(func, wait) {
 let timeout;
 return function() {
 let context = this;
 let args = arguments;
 if (!timeout) {
 timeout = setTimeout(() => {
 timeout = null;
 func.apply(context, args)
 }, wait)
 }
 }
}

看完这些代码：

什么玩意儿？？？这么麻烦的吗？防抖还好，大部分都能达到理想的效果，可是节流就没那么理想了。节流是技能冷却啊！就是要点一下立马触发，进入冷却，等冷却，结束继续能点。然而大多版本都是：点击等一会儿才触发，进入冷却。前面多了莫名的等待时间，不是立马触发的.......

做为一个强迫症患者，这不能忍。

于是乎，我决定自己撸一个。：

总结了一些例子，折腾了一下。自己版本的防抖节流就出炉啦！！

防抖：

 let time2;
 document.getElementById('防抖').onclick =
 function () {
 clearTimeout(time2);
 time2=setTimeout(function () {
 //做一些快乐的事情
 },2000);
 };

节流：

let bool=true;

document.getElementById('节流').onclick = function () {

if(bool){

//做一些开心的事情

bool=false;

setTimeout(()=>{

bool=true

},2000)

}

}

测试了几下效果十分理想，代码精简，简单易懂。我觉得很ok！！

好啦，此次分享到这里！呀哈哈。以上内容如果有不足之处，望大家指点一二，如果有更精简的例子，更好的例子，望大家分享下。