函数防抖

最新推荐文章于 2023-11-22 08:16:52 发布

原创最新推荐文章于 2023-11-22 08:16:52 发布 · 540 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5 #javascript

函数防抖是一种优化技术，用于限制函数的执行频率，防止在短时间内被频繁调用。本文详细介绍了函数防抖的概念，并通过一个JavaScript示例展示了如何实现防抖函数。在示例中，`debounce`函数用于创建一个防抖版的`textChange`和`winChange`函数，分别应用于文本输入框的keyup事件和窗口的resize事件，确保在特定时间间隔后才执行实际操作，有效提高了性能。

什么是函数防抖？？

其实就是防止函数短时间内被调用多次。就叫做函数防抖，.要完成该函数，需要给予两个条件：

告诉我一段时间后要做什么事（这里应该是一个 callback，即函数作为参数）
告诉我要等待多长时间

功能

调用该函数后，不立即做事，而是一段时间后去做事
如果在等待时间内调用了该函数，则重新开始计时



    // 防抖函数
    function debounce(fn, ms) {
      let timer = null;
      return function () {
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          fn();
        }, ms);
      }
    }
    // 真正操作防抖 textChange 得到的是一个函数
    let textChange = debounce(function () { // function 参数作为 debounce 的第一个实参
      console.log(txt.value);
    }, 3000);

    txt.onkeyup = function () {
      textChange();
    }

    let winChange = debounce(() => {
      console.log("窗口尺寸改变了");
    }, 500);
    window.onresize = () => {
      winChange();
    }

debounce 函数仅仅负责生成一个计时器的 timerId，保证每次调用 debounce 都会有一个新的 timerId 产生即可，将防抖的工作，交给了返回的函数去完成。今后如果需要对某一个操作进行防抖，只需要调用 debounce() 来得到一个操作函数，再去调用操作函数即可。