防抖和节流

看过很多文章，但是讲的并不是很通俗易懂。这让很多初学者增加很多压力。本文 就通俗易懂的讲解防抖和节流。

防抖：一定时间内如果触发了就清除掉，从新执行。设想：存在一个按钮，绑定了一个事件。如果持续给不断对的点击它，不停的点击。那就一直在清除。刚生成的定时器也随后清了。所以一直不会触发事件。直到你停止了点击，稍后就执行了你最后的一次点击。

节流：一定时间内一定执行而且只执行一次。我们通常规定300ms执行一下的话，那不管你持续不断的点击，一到300ms就执行一次了。所以你持续不断的点击足够久的话，那就执行很多次了。

理解这概念后，我们明显可以得出它该用于哪些用途，滚动条触发的事件。我们通常希望它每隔多少ms执行一次就行了，不用不间断的执行。那么久可以用节流了。像点击事件，我们通常希望你一直持续点的话，如果点击的时间间隔太短。我们希望是不执行的。也就是你持续不断点也是不执行，那就是防抖了。其他的情况也是这么通俗的判断就行。

防抖：

 function debounce(fn,delay=300) {
            let timeout = null; // 创建一个标记用来存放定时器的返回值
            return function () {
                clearTimeout(timeout); //只要触发就清掉
                timeout = setTimeout(() => {//然后又执行新的。
                    fn.apply(this, arguments);
                }, delay);
            };
        }

节流：

          function throttle(fn,delay=300) {//一定时间内只执行一次
            let canRun = true; // 通过闭包保存一个标记
            return function () {
                if (!canRun) return;//在delay时间内，直接返回，不执行fn
                canRun = false;
                setTimeout(() => { 
                    fn.apply(this, arguments);
                    canRun = true;//直到执行完fn,也就是delay时间后，打开开关，可以执行下一个fn
                }, delay);
            };
        }     

关于为啥使用闭包和fn.apply(this,arguments)的用法可以参考我其他的文章有讲解。