js史上最精简！防抖节流

前言

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

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