防抖与节流

最新推荐文章于 2024-11-05 22:07:06 发布

iiiilooaixuud

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量69

点赞数

分类专栏： JavaScript进阶文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_46617584/article/details/124831931

版权

JavaScript进阶专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文深入探讨了JavaScript中的防抖(debounce)和节流(throttle)技术，通过实例解释它们的工作原理及实现方式。防抖用于限制函数的执行频率，避免在频繁触发时执行过多，而节流则确保在一段时间内只执行一次。文章通过代码展示了如何创建防抖和节流函数，并在事件监听中应用，如输入框的实时搜索场景，以优化性能。

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

防抖：

在这一次触发事件的时候,如果间隔小于规定的时间，就清除上一次的延时,然后加上延时，如果一次触发后大于规定的时间没有再触发，则执行。

问题：怎么去清除上一次的延时,我们怎么拿到并清除呢？

先来看看防抖的原理吧------------>

const send2 = debounce(hand, 1000);

      function hand() {
        console.log("触发事件");
      }
      //防抖函数
      function debounce(fn, wait) {
        let timer = null;
        return function () {
          //清除上一次定时器
          timer && clearTimeout(timer);
          //开启新的
          timer = setTimeout(() => {
            fn.apply(this, arguments);
          }, wait);
        };
      }

这个例子中的hand函数就是需要执行的事件函数，而debounce则是防抖函数。防抖函数会返回一个函数,每次执行这个被返回的函数,返回函数里引用了节流函数的变量timer(闭包->作用域链),在这之后，每次执行send2所使用到的timer都是同一个timer，timer的值就是上一次的，每次我们就可以拿到并清除，开启新的延时了,如果在wait时间段内没有再触发事件,就不会清除上一次的延时,就会执行了。

节流

在一段固定时间内只执行一次。

在这一次触发的时候,判断和上一次的间隔是否大于规定的事件，如果是那么久执行一次执行事件。和防抖一个问题就是怎么去获取上次触发的时间呢

<input type="text" placeholder="节流" oninput="send("eee")" />;
      //检测现在的时间和上一次输入的时间是否相差对应的时间
      //节流
      function reduce(fn, wait) {
        let before = Date.now();
        return function () {
          let now = Date.now();
          if (now - before >= wait) {
            fn.apply(this, arguments);
            before = now;
          }
        };
      }

      function handle(name) {
        console.log("发送求情", name);
      }

      const send = reduce(handle, 1000);

这里如果在输入框中输入就会触发send事件,那么send就是reduce(节流)函数返回的函数的引用，然后执行。和防抖一样,所用到的变量before都是同一个,那么就可以判断这次和上次事件的事件了,然后对比，执行。