关于javascript:JavaScript之函数防抖节流

一、前言

置信无论在理论利用场景、亦或是面试，都会常常遇失去函数防抖、函数节流等，上面咱们来聊一聊吧。

先放出一个示例：

import React, {useEffect, useRef} from 'react'
import debounce from '../../utils/debounce'
import throttle from '../../utils/throttle'
import style from './index.scss'

export default function Demo(props) {const inputElem1 = useRef()
  const inputElem2 = useRef()
  const inputElem3 = useRef()

  useEffect(() => {inputElem1.current.addEventListener('keyup', request)
    inputElem2.current.addEventListener('keyup', debounce(request, 1000))
    inputElem3.current.addEventListener('keyup', throttle(request, 3000))
  }, [])

  function request(event) {const { value} = event.target
    console.log(`Http request: ${value}.`)
  }

  return (<div className={style.container}>
      <div className={style.list}>
        <label htmlFor="input1"> 一般输入框：</label>
        <input name="input1" ref={inputElem1} defaultValue="" />
      </div>

      <div className={style.list}>
        <label htmlFor="input2"> 防抖输入框：</label>
        <input name="input2" ref={inputElem2} defaultValue="" />
      </div>

      <div className={style.list}>
        <label htmlFor="input3"> 节流输入框：</label>
        <input name="input3" ref={inputElem3} defaultValue="" />
      </div>
    </div>
  )
}

以上 Demo 只有三个输入框，很简略。我给每个输入框绑定了一个 keyup 键盘事件，该事件执行会发动网络申请（为了更简洁，这里只是打印一下而已），而对应防抖、节流输入框则通过相应的解决。

二、函数防抖（debounce）

如果咱们在 一般输入框 疾速键入 12345，能够从管制台上的打印后果看到，它会发动 5 次网络申请（假如咱们这个是一个简略的搜索引擎）。

还不晓得用什么截屏 / 录屏软件能够生成 GIF 动图，有工夫再钻研下 …

从理论场景思考，如果每键入一个字符就立即发动网络申请，去检索后果，这是十分影响体验的。假如咱们限度为：用户在进行输出后 1s 后才发动网络申请。

要实现这样的需要，咱们只有应用函数防抖即可。

2.1 什么是函数防抖？

概念：在肯定工夫距离内，事件处理函数只会执行一次。若在该工夫距离内（屡次）从新触发，则从新计时。

怎么了解？

• 假如用户键入字母 a 后就进行输出了，那么网络申请会在进行键入操作的 1s 后发动。这个很好了解。
• 若用户持续键入字母 b 后，若有所思地停了一会（这个工夫在 1s 之内，假如为 800ms 吧），接着键入字母 c，之后就进行键入了。网络申请会产生在键入字母 c 的 1s 后被发动，而不是键入字母 b 之后的 1s 发动。因为函数防抖会在键入 c 之后从新计时。

2.2 函数防抖实现

debounce(func, wait)

实现思路：

首先，接管两个参数 func（要防抖的函数，个别是事件回调函数）和 wait（须要提早的工夫距离，单位毫秒）。而后 func 在 setTimeout 中执行，而 setTimeout 的延迟时间就是 wait。而从新计时的话，则在每次触发的时候 clearTimeout 即可实现。

须要留神下，func 的执行上下文（this）及其入参。

// debounce.js
function debounce(func, wait) {
  let timerId
  return function () {
    // 以后运行上下文环境，以及实参
    const context = this
    const args = arguments

    // 从新计时（要害是这一步）// 在 wait 工夫内，若从新触发，革除 clearTiemout，以达到从新计时的成果
    if(timerId) clearTimeout(timerId)

    timerId = setTimeout(function () {
      // 绑定上下文和参数，否则实参 func 的 this 指向 window 对象，参数为空
      func.apply(context, args)
    }, wait)
  }
}

借助 ES6 的 Rest 参数和箭头函数语法，简化一下：

function debounce(func, wait) {
  let timerId
  return function (...args) {if (timerId) clearTimeout(timerId)
    timerId = setTimeout(() => {func.apply(this, args)
    }, wait)
  }
}

顺次在对应输入框内键入 12345，比照下防抖前后的后果：

两次键入速度差不多，而且每个字符键入工夫距离小于 1s（可调大提早执行工夫，更容易比照）。

// 一般输入框
inputElem1.current.addEventListener('keyup', request)
// 防抖输入框
inputElem2.current.addEventListener('keyup', debounce(request, 1000))

比照以上无防抖解决和防抖解决的后果，能够看到前者每键入一个字符都会执行回调函数，而后者则会在最初一次触发的 N 毫秒（即 wait 延迟时间）之后才会执行一次回调函数。

还有一种是 “立刻执行” 的函数防抖：区别在于第一次触发时，是否立刻执行回调函数。

再联合以上的 “非立刻执行” 的防抖，残缺办法如下：

/**
 * 函数防抖
 * @param {Function} func 要防抖的函数
 * @param {number} wait 须要提早的毫秒数
 * @param {boolean} immdeiate 是否立刻执行
 * @returns {Function} 返回新的 debounced（防抖动）函数
 */
function debounce(func, wait = 0, immdeiate = false) {
  let timerId
  return function (...args) {if (timerId) clearTimeout(timerId)

    if (immdeiate && !timerId) {func.apply(this, args)
    }

    timerId = setTimeout(() => {func.apply(this, args)
    }, wait)
  }
}

当咱们批改成：

inputElem2.current.addEventListener('keyup', debounce(request, 1000, true))

从以下后果能够看到，当我在防抖输入框键入 12345 的时候，它会在键入 1 时立即发动一次网络申请，因为每个字符键入的工夫距离都在 1s 之内，因而它只会在最初进行键入的 1s 后才会发动网络申请。

三、函数节流（throttle）

概念：在肯定工夫距离内只会触发一次函数。若在该工夫距离内触发屡次函数，只有第一次失效。

3.1 函数节流实现

function throttle(func, wait) {
  // 记录上一次执行 func 的工夫
  let prev = 0
  return function (...args) {
    // 以后触发的工夫（工夫戳）const now = Number(new Date()) // +new Date()
    
    // 单位工夫内只会执行一次
    if (now >= prev + wait) {
      // 符合条件执行 func 时，须要更新 prev 工夫
      prev = now
      func.apply(this, args)
    }
  }
}

3.2 函数节流优化

以上节流办法有个问题，假如节流管制间隔时间为 1s，若最初一次触发工夫在 1.5s，则最初一次触发并不会执行。因而，须要在节流中嵌入防抖思维，以保障最初一次会被触发。

function throttle(func, wait) {
  // 记录上一次执行 func 的工夫
  let prev = 0
  let timerId
  return function (...args) {
    // 以后触发的工夫（工夫戳）const now = Number(new Date()) // +new Date()

    // 保障最初一次也会触发
    // 我看到很多文章，将革除定时器的步骤放到 2️⃣ 外面
    // 我认为应该放在这里才对，起因看我上面举例的场景。if (timerId) clearTimeout(timerId)
    
    if (now >= prev + wait) {
      // 1️⃣
      // 符合条件执行 func 时，须要更新 prev 工夫
      prev = now
      func.apply(this, args)
    } else {
      // 2️⃣
      // 单位工夫内只会执行一次
      // if (timerId) clearTimeout(timerId) // 不应该放在这里
      timerId = setTimeout(() => {
        prev = now
        func.apply(this, args)
      }, wait)
    }
  }
}

假如我将 clearTimeout() 放在了 2️⃣ 外面，而不是在外层。基于 throttle(func, 1000) 思考以下场景：

我在 4s 时触发了一次，应该走 1️⃣ 逻辑。而后在 4.9s 时又触发了一次，这会走的 2️⃣ 逻辑并记录了一个定时工作。而后工夫到了 5s，我又触发了一次（前面就进行操作了），它会走 1️⃣ 逻辑一次，接着工夫来的 5.9s，它还会执行一遍 fn.apply(this, args)，因为在 5s 触发时，没有 clearTimeout()。因而，革除定时器的步骤应该放在外层，以保障每次被触发是都清掉最初一次的定时器，防止在一些边界 Case 触发两次。

当然，以上场景是在现实的状态，理论场景可能简直碰不到这些边界。但从谨严的角度去看问题，应该也要思考的。

写到这里，我又在想刚刚的“立刻执行的函数防抖”，跟这个优化版的节流是不是有点像，第一次触发都会执行回调函数。但区别是防抖会从新计时，而节流在第一次触发前面的每个间隔时间点都会触发，非距离点的最初一次触发也将会被执行。

我在节流输入框内，顺次键入 1234567890，能够看到：在键入字符 1 时执行了回调；接着键入的 234、67 字符都属在上一个工夫距离内，因而无奈执行回调。其中键入的 90 字符应属于 8 之后的 1s 周期之内，因为键入 0 字符属于最初一次的非工夫距离内的触发动作，因而回调会在键入 0 的 1s 后被执行。（可打印工夫戳的模式，更精密地比照）

inputElem3.current.addEventListener('keyup', throttle(request, 1000))

四、防抖与节流

其实，函数防抖和函数节流都是为了避免某个时间段频繁触发某个事件。它俩在某个工夫距离内多次重复触发，都只会执行一次回调函数。区别在于函数防抖最初一次触发无效，而函数节流则是第一次触发无效。

而在下面，都对函数防抖和函数节流做了“拓展”，例如：

• 在函数防抖中，减少了 immediate 的参数，用于管制第一次是否执行回调。
• 在函数节流中，容许最初一次在非工夫距离的触发动作无效。

利用场景：

• 函数防抖（debounce）

  • 搜寻场景：避免用户不停地输出，来节约申请资源。
  • window resize：调整浏览器窗口大小时，利用防抖使其只触发一次。

• 函数节流（throttle）

  • 鼠标事件、mousemove 拖拽
  • 监听滚动事件

如果还是不太明确 debounce 和 throttle 的差别，能够在以下这个页面，可视化体验。

五、拓展

还是那句话：

生产环境请应用 Lodash 库，对应的办法是 _.debounce() 和 _.throttle()。

毕竟 Lodash 是通过社区考验的，必定会欠缺很多。而我这篇文章可能会有一些我未曾想到的场景没有解决的，面向学习和面试（手动狗头）。

如有有余，欢送指出 👋 ~

TODO List:

• 具体浏览 Lodash 的防抖和节流源码。
• window.requestAnimationFrame

六、参考

• Lodash debounce
• 函数防抖与函数节流（司徒正美大佬）