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

前言

---

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

“我自己是一名从事了8年web前端开发的老程序员（我的微信：webxxq），今年年初我花了一个月整理了一份最适合2020年自学的web前端全套培训教程（视频+笔记+素材+源码+项目实战），从最基础的HTML+CSS+JS到移动端HTML5以及各种框架和新技术都有整理，打包给每一位前端小伙伴（总共约85G），这里是前端学习者聚集地，欢迎初学和进阶中的小伙伴（所有前端教程关注我的微信公众号：web前端学习圈，关注后回复“2020”即可领取）。

 

 

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

好的，然后呢？？

 

然后呢？当然是百度一下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！！

 

 

 

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

结尾：

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