[JavaScript面试问题]13. 防抖和节流

防抖和节流的共同作用都是减少js中高频调用代码的执行，不过二者方式略有区别。

通俗通俗一点讲，比如你打LOL或者王者荣耀之类的MOBA，防抖就是回城，回城过程中取消了就得重新读条，每次回城总以最后一次完整读条为准，这样才能回泉水。防抖亦是如此，当短时间反复调用一段代码时，只有在最后一次调用之后一段时间，代码才生效。这段时间可以理解为回城读条时间。

至于节流，则是放技能，每个技能都有CD，放了技能就必须等待CD才能放下一次。反复调用一段代码，该代码生效一次后，下一次生效必定在“CD”之后。

按照这个逻辑，你玩FPS的话，防抖下包，节流换子弹（如果可以连续换弹的话）。

防抖节流有许多方法，这里采用最常见的定时器+闭包的解法。写的有点复杂。

• 防抖

      // 防抖
      function myDebounce(func) {
        let time
        function wrapper() {
          clearTimeout(time)
          time = setTimeout(() => {
            func.apply(this, arguments)
          }, 1000)
        }
        return wrapper
      }

      function test(a) {
        console.log(a)
      }

      let debounce = myDebounce(test)

      setTimeout(() => {
        debounce(1)
      }, 0)
      setTimeout(() => {
        debounce(2)
      }, 522)
      setTimeout(() => {
        debounce(3)
      }, 722)

      setTimeout(() => {
        debounce(4)
      }, 2022)

• 节流

      function throttle(func, ms) {
        let accessIn = true
        let saveThis
        let saveArgs
        let timeout
        function wrapper() {
          if (!accessIn) {
            let saveThis = this
            let saveArgs = arguments
            // 节流状态保存上下文和参数
            return
          }
          accessIn = false
          func.apply(this, arguments)
          // 不节流时调用func，并且开启定时器
          setTimeout(() => {
            accessIn = true
            if (saveArgs) {
              wrapper.apply(saveThis, saveArgs)
              saveThis = null
              saveArgs = null
            }
          }, ms)
        }
        return wrapper
      }

      function test(a) {
        console.log(a)
      }

      let throttleTest = throttle(test, 1000)
      setTimeout(() => {
        throttleTest(1)
      }, 200)

      setTimeout(() => {
        throttleTest(2)
      }, 500)

      setTimeout(() => {
        throttleTest(3)
      }, 700)

      setTimeout(() => {
        throttleTest(4)
      }, 2000)