函数节流和函数防抖

函数节流和函数防抖两者都是优化高频率执行js代码的一种手段。

函数节流

• 概念：
  在一定时间内，不管事件触发几次，js方法只执行一次
• 实现原理：
  setTimeout()，控制状态的锁
• 场景：
  用户点击按钮打印“你好！”，并且在点击按钮后3秒后才能再打印，期间用户点击打印不会执行打印“你好！”
• 代码实现：

      let flag = true // 设置节流的锁
      const throttle = (fn, delay = 500) => {
        if (flag) {
          // 当锁是打开时，执行对应方法
          fn() // 执行对应方法
          flag = false // 将锁关闭，锁关闭时，不进入if
          setTimeout(function () {
            flag = true // 将锁打开，锁打开时，进入if
          }, delay)
        }
      }

      document.getElementById('aaa').onclick = () => {
        throttle(function () {
          console.log('节流')
        })
      }

函数防抖

• 概念：
  事件触发后，需要等待一定时间后js方法才会执行。如果事件再次触发，则取消上一次的延迟操作，重新对延迟的时间进行计时。
• 实现原理：
  setTimeout()与clearTimeout()
• 场景：
  在搜索时，在接受用户输入内容的300毫秒后，执行请求函数；
• 代码实现：

      let timer
      const debounce = (fn, delay) => {
        clearTimeout(timer) // 清除上一次还未执行的定时器
        timer = setTimeout(function () {
          fn()
        }, 500)
      }

      document.getElementById('bbb').onclick = () => {
        debounce(function () {
          console.log('防抖')
        })
      }