JavaScript的防抖和节流

防抖和节流其实都是针对在一些存在频繁触发事件的时候需要减少它的一个触发次数，达到一个优化的目的，例如在输入框的change事件，滚动的监听都会存在重复触发的情况，这个时候我们就要很对这种情况进行一些处理

防抖

防抖就是在一段事件内，如果重复执行了同一个事件，那么我们就只保留最后一次执行，一般用于输入框的change事件。
设计思路：将我们需要执行的方法，放在一个定时器中，声明一个全局变量将定时器赋值给这个变量，当第一次执行的时候，先判断此此全局变量是否被赋值，如果被赋值了说明存在之前的执行，这个就将它清除掉，保证它为没有赋值的状态。详细标注为以下代码，特别注意其中的注释

           let loop = null;
           const deBounce = (delay,callback) => {
             if(loop === null){ //判断之前是否存在事件执行，为null说明在delay的时间内，不存在之前执行的代码，不为null说明存在执行的内容，需要去除,这样在同一时间内重复触发，就重复清除，这样就保留了最后一次的执行
                loop = setTimeout(()=>{
                  callback();
                  loop = null;
                },delay)
             }else{
                clearTimeout(loop);
                loop = null;
             }
            }
            const callback = () => {
                console.log('事件执行');
            }
            deBounce(1000,callback);

节流

节流就是在一段时间内事件重复触发的时候，规定时间段内，触发一次，一般适用于滚动监听。
设计思路：定义全局变量，设置为true，当第一次进入的时候，执行定时函数，然后将值置为false，在二次执行的时候，如果之前定时函数的方法还为执行那么全局变量一直都是false，当定时函数执行完成后在将全局变量置为ture，具体代码如下：

           let bool = true;
           const throttle = (delay,callback) => {
             if(bool === true){ 
                setTimeout(()=>{
                  callback();
                  bool = true;
                },delay)
             }
             bool = false;
            }
            const callback = () => {
                console.log('事件执行');
            }
            throttle(2000,callback);

注意，以上的写法都是放了方便大家理解，没有采用闭包的方式进行书写！！！

以下写法为优化过后的逻辑结构，闭包写法

防抖

          const debounce = (fn, delay) => {
                let loop = null;
                return () => {
                    if (loop !== null) clearTimeout(loop);
                    loop = setTimeout(fn, delay);
                }
            }
            // 处理函数
            const callback = () => {
                console.log('事件触发');
            }
            debounce(callback, 1000)

节流

          const throttle = (fn, delay) => {
                let bool = true;
                return () => {
                    if (bool){
                        setTimeout(fn, delay);
                        bool = true;
                    }
                    bool = false;
                }
            }
            // 处理函数
            const callback = () => {
                console.log('事件触发');
            }
            throttle(callback, 1000)