你不容错过的JavaScript高级语法(防抖，节流)

下面一篇文章将介绍防抖，节流函数。

认识防抖和节流函数

防抖和节流的概念其实最早并不是出现在软件工程中，防抖是出现在电子元件中，节流出现在流体流动中。而JavaScript是事件驱动的，大量的操作会触发事件，加入到事件队列中处理。而对于某些频繁的事件处理会造成性能的损耗，我们就可以通过防抖和节流来限制事件频繁的发生。

防抖debounce

认识防抖函数

他就像我们电脑的屏保一样。你在一定时间移动鼠标，他就不会出现。

• 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间。
• 当事件密集触发时，函数的触发会被频繁的推迟。
• 只有等待了一段时间也没有事件触发，才会真正的执行响应函数。

防抖的应用场景

• 输入框中频繁的输入内容，搜索或者提交信息。
• 频繁的点击按钮，触发某个事件。
• 监听浏览器滚动事件，完成某些特定操作。
• 用户缩放浏览器的resize事件。

节流throttle

认识节流函数

• 当事件触发时，会执行这个事件的响应函数。
• 如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数。
• 不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的。

节流的应用场景

• 监听页面的滚动事件。
• 鼠标移动事件。
• 用户频繁点击按钮操作。
• 游戏中的一些设计。

使用Underscore库来帮助实现

事实上我们可以通过一些第三方库来实现防抖操作：

• lodash
• underscore

我们可以理解成lodash是underscore的升级版，它更重量级，功能也更多。但是目前我看到underscore还在维护，lodash已经很久没有更新了。

Underscore的官网： underscorejs.org/

下面来看一下简单的案例：

• 没有使用防抖节流函数

      <input type="text">
      <script>
        const inputEl=document.querySelector("input");
        inputEl.oninput=(e) => {
          console.log(`${e.target.value}触发input事件`)
        }
      </script>

• 使用防抖函数。

      <input type="text">
      <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
      <script>
        const inputEl=document.querySelector("input");
        const inputFn=(e) => {
          console.log(`${e.target.value}触发input事件`)
        }
        inputEl.oninput=_.debounce(inputFn,1000);
      </script>

• 使用节流函数。

      <input type="text">
      <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
      <script>
        const inputEl=document.querySelector("input");
        const inputFn=(e) => {
          console.log(`${e.target.value}触发input事件`)
        }
        inputEl.oninput=_.throttle(inputFn, 1000);
      </script>

通过上面的案列，我们可以很清楚的看出防抖节流的作用和区别。

自定义防抖和节流函数

防抖函数

• 基本实现
  • 该函数只能实现该功能，不能使用事件对象和this。（this指向错误）

    function debounce(fn, delay) {
      // 1.定义一个定时器, 保存上一次的定时器
      let timer = null

      // 2.真正执行的函数
      const _debounce = function() {
        // 取消上一次的定时器
        if (timer) clearTimeout(timer)
        // 延迟执行
        timer = setTimeout(() => {
          // 外部传入的真正要执行的函数
          fn()
        }, delay)
      }

      return _debounce
    }

• 解决事件对象和this指向问题
  • 但是事件第一次被触发不会被执行

    function debounce(fn, delay) {
      // 1.定义一个定时器, 保存上一次的定时器
      let timer = null

      // 2.真正执行的函数
      const _debounce = function(...args) {
        // 取消上一次的定时器
        if (timer) clearTimeout(timer)
        // 延迟执行
        timer = setTimeout(() => {
          // 外部传入的真正要执行的函数
          fn.apply(this, args)
        }, delay)
      }

      return _debounce
    }

其实实现的这里，已经可以了。

• 解决该函数第一次不能触发问题
  • 就是让用户传入一个boolean来控制第一次执行。并且还需要在内部定义一个isInvoke来判断是否为停顿后的执行。等到每次触发函数后，将isInvoke改为false。表示停顿后依旧是第一次执行。

    function debounce(fn, delay, immediate = false) {
      // 1.定义一个定时器, 保存上一次的定时器
      let timer = null
      let isInvoke = false

      // 2.真正执行的函数
      const _debounce = function(...args) {
        // 取消上一次的定时器
        if (timer) clearTimeout(timer)

        // 判断是否需要立即执行
        if (immediate && !isInvoke) {
          fn.apply(this, args)
          isInvoke = true
        } else {
          // 延迟执行
          timer = setTimeout(() => {
            // 外部传入的真正要执行的函数
            fn.apply(this, args)
            isInvoke = false
          }, delay)
        }
      }

      return _debounce
    }

• 添加取消函数。
  • 当我们触发事件时，然后想要取消该事件的执行。
  • 其实就是直接调用clearTimeout。并对一些参数做初始化。

    function debounce(fn, delay, immediate = false) {
      // 1.定义一个定时器, 保存上一次的定时器
      let timer = null
      let isInvoke = false

      // 2.真正执行的函数
      const _debounce = function(...args) {
        // 取消上一次的定时器
        if (timer) clearTimeout(timer)

        // 判断是否需要立即执行
        if (immediate && !isInvoke) {
          fn.apply(this, args)
          isInvoke = true
        } else {
          // 延迟执行
          timer = setTimeout(() => {
            // 外部传入的真正要执行的函数
            fn.apply(this, args)
            isInvoke = false
            timer = null
          }, delay)
        }
      }

      // 封装取消功能
      _debounce.cancel = function() {
        if (timer) clearTimeout(timer)
        timer = null
        isInvoke = false
      }

      return _debounce
    }

• 拿到函数执行的返回值。其实像这种函数的封装，想要拿到函数返回值，都可以使用回调函数。
  • 方式一： 传递回调函数。

      function debounce(fn, delay, immediate = false, resultCallback) {
        // 1.定义一个定时器, 保存上一次的定时器
        let timer = null
        let isInvoke = false
  
        // 2.真正执行的函数
        const _debounce = function(...args) {
          return new Promise((resolve, reject) => {
            // 取消上一次的定时器
            if (timer) clearTimeout(timer)
  
            // 判断是否需要立即执行
            if (immediate && !isInvoke) {
              const result = fn.apply(this, args)
              if (resultCallback) resultCallback(result)
              resolve(result)
              isInvoke = true
            } else {
              // 延迟执行
              timer = setTimeout(() => {
                // 外部传入的真正要执行的函数
                const result = fn.apply(this, args)
                if (resultCallback) resultCallback(result)
                resolve(result)
                isInvoke = false
                timer = null
              }, delay)
            }
          })
        }
  
        // 封装取消功能
        _debounce.cancel = function() {
          if (timer) clearTimeout(timer)
          timer = null
          isInvoke = false
        }
  
        return _debounce
      }
  

  • 方式二： 将_debounce放在Promise执行，当有结果后，放在resolve返回。调用then方法。

      function debounce(fn, delay, immediate = false) {
        // 1.定义一个定时器, 保存上一次的定时器
        let timer = null
        let isInvoke = false
  
        // 2.真正执行的函数
        const _debounce = function(...args) {
          return new Promise((resolve, reject) => {
            // 取消上一次的定时器
            if (timer) clearTimeout(timer)
  
            // 判断是否需要立即执行
            if (immediate && !isInvoke) {
              const result = fn.apply(this, args)
              resolve(result)
              isInvoke = true
            } else {
              // 延迟执行
              timer = setTimeout(() => {
                // 外部传入的真正要执行的函数
                const result = fn.apply(this, args)
                resolve(result)
                isInvoke = false
                timer = null
              }, delay)
            }
          })
        }
  
        // 封装取消功能
        _debounce.cancel = function() {
          if (timer) clearTimeout(timer)
          timer = null
          isInvoke = false
        }
  
        return _debounce
      }
  

  这种方式，需要通过then方法拿到参数，由于该函数是js内部执行。所以需要外层包装一个函数再调用。

      const tempCallback = () => {
        _debounce().then(res => {
          console.log("Promise的返回值结果:", res)
        })
      }
  

节流函数

• 基本实现
  • 这里第一次会执行。因为nowTime刚触发时是很大的。

    function throttle(fn, interval, options) {
      // 记录上一次的开始时间
      let lastTime = 0

      // 事件触发时, 真正执行的函数
      const _throttle = function() {

        // 获取当前事件触发时的时间
        const nowTime = new Date().getTime()

        // 使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
        if ((nowTime - lastTime) >= interval) {
          // 真正触发函数
          fn()
          // 保留上次触发的时间
          lastTime = nowTime
        }
      }

      return _throttle
    }

• 解决事件对象和this指向问题

      function throttle(fn, interval, options) {
          // 记录上一次的开始时间
          let lastTime = 0

          // 事件触发时, 真正执行的函数
          const _throttle = function(...args) {

            // 获取当前事件触发时的时间
            const nowTime = new Date().getTime()

            // 使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
            if ((nowTime - lastTime) >= interval) {
              // 真正触发函数
              fn.apply(this, args)
              // 保留上次触发的时间
              lastTime = nowTime
            }
          }

          return _throttle
        }

其实实现的这里，已经可以了。

• 外界决定是否第一次和最后一次触发
  • 默认情况下，如果最后一次触发事件事件间隔还没有到触发频率，它将不会再次触发。如果有需求，我们可以设置一个定时器让其触发。

    function throttle(fn, interval, options = { leading: true, trailing: false }) {
      // 记录上一次的开始时间
      const { leading, trailing } = options
      let lastTime = 0
      let timer = null

      // 事件触发时, 真正执行的函数
      const _throttle = function(...args) {

        // 获取当前事件触发时的时间
        const nowTime = new Date().getTime()
        if (!lastTime && !leading) lastTime = nowTime

        // 使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
        const remainTime = interval - (nowTime - lastTime)
        if (remainTime <= 0) {
          if (timer) {
            clearTimeout(timer)
            timer = null
          }

          // 真正触发函数
          fn.apply(this, args)
          // 保留上次触发的时间
          lastTime = nowTime
          return
        }

        if (trailing && !timer) {
          timer = setTimeout(() => {
            timer = null
            lastTime = !leading ? 0: new Date().getTime()
            fn.apply(this, args)
          }, remainTime)
        }
      }

      return _throttle
    }

• 添加取消函数。

    function throttle(fn, interval, options = { leading: true, trailing: false }) {
      // 记录上一次的开始时间
      const { leading, trailing } = options
      let lastTime = 0
      let timer = null

      // 事件触发时, 真正执行的函数
      const _throttle = function(...args) {

        // 获取当前事件触发时的时间
        const nowTime = new Date().getTime()
        if (!lastTime && !leading) lastTime = nowTime

        // 使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
        const remainTime = interval - (nowTime - lastTime)
        if (remainTime <= 0) {
          if (timer) {
            clearTimeout(timer)
            timer = null
          }

          // 真正触发函数
          fn.apply(this, args)
          // 保留上次触发的时间
          lastTime = nowTime
          return
        }

        if (trailing && !timer) {
          timer = setTimeout(() => {
            timer = null
            lastTime = !leading ? 0: new Date().getTime()
            fn.apply(this, args)
          }, remainTime)
        }
      }

      _throttle.cancel = function() {
        if(timer) clearTimeout(timer)
        timer = null
        lastTime = 0
      }

      return _throttle
    }

• 拿到执行函数的返回值。
  • 他也是有两种方式。和debounce是现实一样的。

    function throttle(fn, interval, options = { leading: true, trailing: false }) {
      // 1.记录上一次的开始时间
      const { leading, trailing, resultCallback } = options
      let lastTime = 0
      let timer = null

      // 2.事件触发时, 真正执行的函数
      const _throttle = function(...args) {
        return new Promise((resolve, reject) => {
          // 2.1.获取当前事件触发时的时间
          const nowTime = new Date().getTime()
          if (!lastTime && !leading) lastTime = nowTime

          // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
          const remainTime = interval - (nowTime - lastTime)
          if (remainTime <= 0) {
            if (timer) {
              clearTimeout(timer)
              timer = null
            }

            // 2.3.真正触发函数
            const result = fn.apply(this, args)
            if (resultCallback) resultCallback(result)
            resolve(result)
            // 2.4.保留上次触发的时间
            lastTime = nowTime
            return
          }

          if (trailing && !timer) {
            timer = setTimeout(() => {
              timer = null
              lastTime = !leading ? 0: new Date().getTime()
              const result = fn.apply(this, args)
              if (resultCallback) resultCallback(result)
              resolve(result)
            }, remainTime)
          }
        })
      }

      _throttle.cancel = function() {
        if(timer) clearTimeout(timer)
        timer = null
        lastTime = 0
      }

      return _throttle
    }

二者的完整实现有些难度。实现大致功能就行。即会实现到处理this和函数传参即可。

xdm, 小年快乐(๑◡๑)