节流，防抖

防抖：提升代码的性能，只触发最后一次，防止浪费性能（是一个思想）
    思路和实现：（把逻辑代码放在定时器中，在代码刚进来的时候销毁定时器）
            1、触发事件处理函数，先创建一个定时器
            2、把逻辑代码放在定时器中
            3、当函数再次触发，清除定时器
            4、再创建一个新的定时器
    实现：
              function debounce(fn){  // fn是一个函数
                 // 创建一个变量存放定时器
                let timer = null;
                return function(){ // 真正的事件处理函数 this 指向触发者
                  // 触发函数时清除定时器
                  clearTimeout(timer)
                  timer = setTimerout(()=>{
                     // 逻辑代码,让外部传入（函数体+回调）
                    fn.call(this)  // 事件触发者，替换到具体逻辑this值上
                  },1000)
                })
            }
    如：搜索框
            $('#inp').on("input",debounce(function(){
              console.log('防抖成功')}
            }))
           
    触发高频事件后 n 秒后函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间；
    
​
​
节流： 节约性能，间隔时间，延迟触发，
      间隔 n 秒内执行一次（多）
    思路和实现：（滚动条）
             1、事件处理函数执行，先判断有定时器，就直接return （阻挡多次事件处理函                                                                数触发）
             2、把逻辑代码放入定时器中
             3、执行定时器后，置空定时器 （为了事件再次触发的时候，重新创建一个定时                                                                   器）
             4、下次事件函数执行时，在创建一个新的定时器
    实现：
        function throttle(fn){
        let t = null
          return function(){ // 真正的事件处理函数 （this指向事件源）
            if (t) return;
            t = setTimeout(()=>{ // 在箭头函数中 this 指向父级 this的指向
              fn.call(this) //确保上面函数中this的指向，（fn()调用的话，this会指                                                               向window）
              t = null
            },1000)
          }
        }
    
    高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率。
    
区别：
    节流会不断的触发，防抖只在最后一次触发