防抖节流

故心故心故心故心小故冲啊

---

---

防抖

原理：事件回调函数（doSomething）在一段时间（300毫秒）后才执行， 如果在这段时间内再次调用则重新从0开始计算到300毫秒的时间， 当预定的时间内没有再次调用该函数，则执行事件回调函数（doSomething）

function myDebounce(fn, time = 1000) {
        var timeout = null;
        return function () {
            //每次进来先清除
            clearTimeout(timeout);
            timeout = setTimeout(() => {
                console.log(this, arguments);
                fn.apply(this, arguments);
            }, time)

        }
    }

节流

单位时间内连续触发，但是只会执行一次，比如事件在300秒内不断触发点击事件，那么只会执行一次，到下一个300s开始计时的时候，就会在下一个300s内再执行一次；也就是说600s连续触发事件但是只会执行2次。（原理让我们知道需要一个标志位）

function myThrottle(fn, time = 1000){
        //需要一个标志
        var flag = true;
        return function(){
           if(!flag){
               return;
           }else{
               flag = false;
               setInterval(()=>{
                   //当函数执行后
                   fn.apply(this,arguments);
                   flag = true;
               },time)
               
           }
        }
    }

总结

防抖：短时间内多次触发，最终在停止触发后的某个指定时间执行一次函数————只执行一次

节流：短时间内多次触发，即使触发仍在继续也可以根据指定时间触发一次函数————至少执行一次

防抖和节流都是为了解决频繁触发某个事件的情况造成的性能消耗。
防抖就是在出发后的一段时间内执行一次，例如：在进行搜索的时候，当用户停止输入后调用方法，节约请求资源
节流就是在频繁触发某个事件的情况下，每隔一段时间请求一次，类似打游戏的时候长按某个按键，动作是有规律的在间隔时间触发一次