88-防抖

防抖和节流

• 优化js高频操作的一种技术手段

• js高频操作：js中一些常用事件触发频率较高，所以可以采用防抖和节流进行优化

  • input
  • mousemove
  • ….

防抖

• 概念：在n秒之后，再执行目标函数，如果n秒内触发了该事件，那么从当前事件重新计时，n秒后执行目标事件（延时计时器）
• 实现思路：使用延时计时器，n秒之后执行目标函数。每次执行目标函数之前先进行检测当前是否存在延时计时器，有则将延时计时器进行清除，重新开始计时

  function outer() {
      //设置延时计时器
      let timer = null
      function inner() {
          //执行之前判断内存中是否有延时计时器，有则重新计时
          if (timer) {
              clearTimeout(timer)
              timer = null
          }
          timer = setTimeout(function () {
              //执行目标代码
              // 清空延时计时器
              timer = null
          }, 延时时间)
      }
      return inner
  }

节流

• 思想：在n秒之内，只执行依次目标回调函数

• 实现思路：如果内存中已经存在延时计时器，那么将不再生成新的延时计时器

  //节流
  function outer() {
      //初始化变量
      let timer = null
      return function () {
          //判断是否存在延时计时器
          if (!timer) {
              //设置新的延时计时器
              timer = setTimeout(() => {
                  // 目标函数执行代码
                  console.log(1111);
                  //清空延时计时器
                  timer = null
              }, 延时时间);
          }
      }
  }
  

防抖和节流的区别

• 相同时间内，节流触发的频率高于防抖
• 防抖的触发时间大于等于设置的延时时间，而节流的触发时间等于设置的延时时间