什么是防抖？什么是节流？

mrcsunflower

已于 2022-11-23 13:38:59 修改

阅读量464

点赞数 2

分类专栏： js 文章标签： javascript 开发语言 ecmascript

于 2022-07-29 22:41:02 首次发布

本文链接：https://blog.csdn.net/qq_45134488/article/details/126062894

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文深入探讨了JavaScript中的防抖(debounce)和节流(throttle)技术，旨在优化频繁触发的事件处理，提高页面性能。防抖技术在用户连续触发事件时，仅执行最后一次操作，常用于输入框监听、窗口大小调整等场景；节流则确保在设定时间间隔内函数只执行一次，适用于鼠标移动、滚动条等高频事件。文章通过实例代码详细解析了两种技术的实现思路和应用场景，并比较了它们的异同。

摘要由CSDN通过智能技术生成

一、防抖（debounce）

1.1 基本概念

间隔时间内，多次触发事件，以最后一次为准。

1.2 应用场景

键盘输入框（oninput）、鼠标移动（onmousemove）、调整浏览器窗口大小（resize）等。

1.3 防抖思路

声明一个变量存储定时器id
每一次触发事件的时候，先不触发，开启定时器，间隔时间之后再触发
如果在间隔时间内，用户触发了其他事件，则结束上一次定时器，以最后一次为准
开启本次定时器

1.4 eg

<input type="text">
  <script>
    let input = document.querySelector("input");

    let time = null;

    // oninput：当用户向 <input> 中尝试输入时执行 JavaScript：
    input.oninput = function () {

      if (time !== null) {
        /**
         *  clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作。
            clearTimeout() 方法的参数必须是由 setTimeout() 返回的 ID 值。
            注意: 要使用 clearTimeout() 方法, 在创建执行定时操作时要使用全局变量：
         */
        clearTimeout(time);
      }

      time = setTimeout(() => {
        console.log(this.value);
      }, 500)

    }
  </script>

利用闭包封装

<input type="text">
  <script>
    let input = document.querySelector("input");

    input.oninput = debounce(function () {
      console.log(this.value);
    }, 500);

    // 利用闭包实现封装的防抖方法
    function debounce(fn, delay) {
      let time = null;
      return function () {
        if (time !== null) {
          clearTimeout(time);
        }
        time = setTimeout(() => {
          fn.call(this);
        }, 500)
      }
    }
  </script>