防抖与节流方案_js史上最精简！防抖节流（你的比我精简，算我输）。

前言

---

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

防抖，防止抖动？节流，节约流水？？于是乎百度了一波，终于弄懂。   就是，为了防止事件在短时间内被多次触发的两种解决方案。网上巴拉巴拉一堆说法，   总结：   防抖：你狂点按钮也没有，等你冷静下来事件才会触发。   节流：游戏里面的技能冷却功能。

好的，然后呢？？

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

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

防抖：

//例子1function debounce(fn,delay=200){  let timer = null;  return function(){    if(timer) clearTimeout(timer);    timer = setTimeout(()=>{      fn.apply(this,arguments);      timer = null;    },delay);  }}//例子2function 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！！

(为了方便阅读，在此不对函数进行封装)

结尾：

第一次，发文章感觉有点小激动！呀哈哈。以上内容如果有不足之处，望大家指点一二，如果有更精简的例子，更好的例子，望大家分享下。

源自：https://juejin.im/post/5da7c77a51882554c0757f46

声明：文章著作权归作者所有，如有侵权，请联系小编删除。

感谢 · 转发欢迎大家留言