性能优化之防抖与节流

（一）防抖

（1）定义：单位事件内，频繁触发，只执行最后一次（像王者荣耀的回城操作）

（2）使用场景：搜索输入框、手机号邮箱输入检测

（3）如何使用防抖

   （3.1）lodash处理防抖

     引入lodash.min.js，用其提供的函数为_.debounce(fun,时间)

     第一个参数为要处理的函数，第二个为过了多少秒执行函数

   （3.2）手写防抖函数

        核心思路：利用定时器setTimeout实现

• 声明一个定时器变量
• 当鼠标每次滑动先判断是否有定时器了，如果有则先清除以前的定时器
• 如果没有定时器则开启定时器，记得存在变量里面
• 在定时器里面调用要执行的函数

function debounce(fn,t){

      let time

      // 如果直接写函数，则页面一打开就会执行函数，且执行一次，所以要返回一个函数

      return function(){

        if(time) clearTimeout(time)

       time=setTimeout(function(){

          fn()

        },t)

      } 

    }

（二）节流

（1）节流定义：单位时间内，频繁触发，只执行一次（例如技能冷却，等几秒后才能执行下一次的代码）

（2）应用场景：鼠标移动mousemove、页面尺寸缩放resize、滚动条滚动scroll等等

（3）如何实现节流

（3.1）lodash处理节流

        _.throttle(fn,时间)，第一个参数为要执行的函数，第二个参数为最多多少秒执行一次函数

（3.2）手写节流函数

  核心思路：利用定时器setTimeout实现

• 声明一个定时器变量 
• 当鼠标每次滑动先判断是否有定时器了，如果有则不开启定时器
• 如果没有定时器则开启定时器，记得存在变量里面
• 在定时器里面调用要执行的函数，定时器里面要用time=null把定时器清空

// 手写节流函数

      function  throttle(fn,t){

        let time=null

        return function(){

          if(!time){

            time=setTimeout(function(){

              fn()

              // 在setTimeout中无法删除定时器，因为定时器还在运作，应使用time=null,而不是clearTimeout

              time=null

            },t)

          }

        }

      }