带你梳理 JavaScript 节流和防抖是什么以及如何实现 Throttle

JavaScript 中的节流（Throttling）和防抖（Debouncing）是常用于优化用户体验和性能的前端技术。它们可以确保函数不会被频繁调用，从而减少浏览器中的计算和网络开销。

节流和防抖是什么？

节流

节流是指在一段时间内，无论事件触发多少次，只执行一次处理函数。通俗地讲，就是每隔一定时间执行一次函数。

防抖

防抖是指当一个函数连续触发时，只有在规定时间间隔内没有再次触发该函数时，才会执行处理函数。通俗地讲，就是等待一段时间后执行函数。

如何实现 Throttle？

下面我们将分别介绍如何实现节流和防抖。

节流的实现

-------- -------------- ------ -
  --- ----- - -----
  ------ ---------- -
    ----- ------- - -----
    ----- ---- - ----------
    -- -------- -
      ----- - --------------------- -
        ------------------- ------
        ----- - -----
      -- -------
    -
  --
-

上述代码中，throttle 函数接收两个参数：要执行的函数 func 和延迟时间 delay。它返回一个函数，该函数使用闭包来存储 timer 变量，用于判断是否已经执行过函数。

每次执行时，它将检查 timer 变量。如果没有设置定时器，则创建一个新的定时器，并在规定的时间后执行处理函数。否则，它会忽略该事件，直到之前的定时器完成。

防抖的实现

-------- -------------- ------ -
  --- ----- - -----
  ------ ---------- -
    ----- ------- - -----
    ----- ---- - ----------
    --------------------
    ----- - --------------------- -
      ------------------- ------
    -- -------
  --
-

上述代码中，debounce 函数接收两个参数：要执行的函数 func 和延迟时间 delay。它返回一个函数，该函数使用闭包来存储 timer 变量，用于防止连续触发。

每次执行时，它将清除之前的定时器，并创建一个新的定时器，在规定的时间后执行处理函数。这样就可以确保处理函数不会被频繁调用。

总结

节流和防抖是优化用户体验和性能的常用技术。它们可以减少浏览器中的计算和网络开销，从而提高应用程序的响应速度。在实际开发中，我们可以根据情况选择使用节流或防抖来优化应用程序。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/33426