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

认识防抖和节流函数

防抖和节流的概念其实最早并不是出现在软件工程中，防抖是出现在电子元件中，节流出现在流体流动中。而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和函数传参即可。

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

认识防抖和节流函数

防抖debounce

认识防抖函数

防抖的应用场景

节流throttle

认识节流函数

节流的应用场景

使用Underscore库来帮助实现

自定义防抖和节流函数

防抖函数

节流函数

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

认识防抖和节流函数

防抖debounce

认识防抖函数

防抖的应用场景

节流throttle

认识节流函数

节流的应用场景

使用Underscore库来帮助实现

自定义防抖和节流函数

防抖函数

节流函数

热门文章

最新文章

相关课程

相关电子书

相关实验场景