JS防抖和节流详解_js 防抖

作者：AllinToyou | 2024-05-13 21:35:46

踩

js 防抖

文章目录

一、防抖和节流的定义
二、防抖应用场景
三、节流应用场景
四、为什么要防抖?
- 4.1、防抖怎么做
五、为什么要节流
- 5.1、节流怎么做?
六、总结
七、插件lodash实现防抖和节流（推荐）
- 7.1、使用
- 7.2、语法
八、vue中使用lodash

一、防抖和节流的定义

防抖和节流本质上是优化高频率执行代码的一种手段，如：浏览器的 resize scroll keypress mousemove 等事件在发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用throttle(防抖)和deboumnce(节流)的方式来减少调用频率

节流：n秒内只运行一次，若在n 秒内重复触发，只有一次生效
防抖：n秒后在执行该事件，若在n秒内被重复触发，则重新计时。用户高频事件完了，再进行事件操作

二、防抖应用场景

搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测onchange /oninput事件
窗口大小计算。只需窗口调整完成后，计算窗口大小。防止重复渲染

三、节流应用场景

懒加载、滚动加载、加载更多或监听滚动条位置
防止高频点击提交，防止表单重复提交

四、为什么要防抖?

有的操作是高频触发的，但是其实触发一次就好了，
比如我们短时间内多次缩放页面，那么我们不应该每次缩放都去执行操作，应该只做一次就好。
再比如说监听输入框的输入，不应该每次都去触发监听，应该是用户完成一段输入后在进行触发。

总结：等用户高频事件完了，再进行事件操作。

4.1、防抖怎么做

设计思路：事件触发后开启一个定时器，如果事件在这个定时器限定的时间内再次触发，则清除定时器，在写一个定时器，定时时间到则触发。

  <body>
    <input type="text" id="input" />
    <script>
      /* 防抖 */
      function debounce(fn, delay) {
        let timer = null;
        return function () {
          clearTimeout(timer);
          timer = setTimeout(() => {
            fn.apply(this, arguments);
          }, delay);
        };
      }
      /* input事件触发执行的逻辑 */
      function trigger(e) {
        console.log(e.target.value);
      }
      const inputDom = document.getElementById("input");
      // 不加防抖
      // inputDom.oninput = trigger;
      // 加防抖
      inputDom.oninput = debounce(trigger, 200);
    </script>
  </body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

五、为什么要节流

防抖存在一个问题
事件会一直等到用户完成操作后一段时间在操作，如果一直操作，会一直不触发。比如说是一个按钮，点击就发送请求，如果一直点，那么请求就会一直发不出去。

这里正确的思路
应该是第一次点击就发送，然后上一个请求回来后，才能再发。
节流就是减少流量，将频繁触发的事件减少，并每隔一段时间执行。即，控制事件触发的频率

**总结：**某个操作希望上一次的完成后再进行下一次，或者希望隔一段时间触发一次。

5.1、节流怎么做?

设计思路：
我们可以设计一种类似控制阀门一样定期开放的函数，事件触发时让函数执行一次，然后关闭这个阀门，过了一段时间后再将这个阀门打开，再次触发事件。

  <body>
    <button id="btn">点我</button>
    <script>
      /* 防抖 */
      function throttle(fn, delay) {
        let valid = true;
        return function () {
          /* 一开始就触发---后续每隔delay时间内只触发一次 */
          if (valid) {
            valid = false; // 关闭阀门
            // 如果阀门已经打开，就继续往下
            setTimeout(() => {
              fn.apply(this, arguments); // 定时器结束后执行
              valid = true; // 执行完成后打开阀门
            }, delay);
          }
        };
      }
      /* 点击事件触发执行的逻辑 */
      function trigger(e) {
        console.log("按钮被点击了");
      }
      const btnDom = document.getElementById("btn");
      // 不加节流
      // btnDom.addEventListener("click", trigger);
      // 加节流的
      btnDom.addEventListener("click", throttle(trigger, 1000));
    </script>
  </body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

刚开始valid为true，然后将valid重置为false,进入了定时器
在定时器执行完毕后之后，才会将valid重置为true
valid为true之后，之后的点击才会生效
在定时器的时间期限内，valid还没有重置为true，
就实现了在N秒内多次点击只会执行一次的效果

六、总结

防抖和节流相同点：
防抖和节流都是为了阻止操作高频触发，从而浪费性能。

防抖和节流不同点：

防抖是触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。适用于可以多次触发但触发只生效最后一次的场景。
节流是高频事件触发，但在n秒内只会执行一次，如果n秒内触发多次函数，只有一次生效，节流会稀释函数的执行频率。

七、插件lodash实现防抖和节流（推荐）

lodash插件：里面封装函数的防抖与节流与节流的业务【闭包+延迟器】
lodash函数库对外暴露_函数

npm i --save lodash
1

7.1、使用

import _ from 'lodash'
1

7.2、语法

fn是你需要处理的方法，delay延迟时间

_.throttle(fn,delay)
_.debounce(fn,delay)
1
2

八、vue中使用lodash

<template>
  <div @mouseover="myThrottle" @mouseout="myThrottle"></div>
</template>
<script>
import _ from "lodash";
export default {
  data() {
    return {
      myThrottle: null,
    };
  },
  mounted() {
    this.myThrottle = _.throttle(this.trigger, 200);
  },
  methods: {
    // 更新
    trigger() {
      console.log("鼠标移入/出");
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/565778