防抖与节流的使用详解（附代码解析）

一、防抖

        防抖，可以理解为防止用户“手抖”导致的多次点击问题，比如：一个提交按钮，用户点击了多次，则会导致出现多条提交请求，导致数据混乱；又可以用于用户输入时，根据用户输入实时查询，当用户“一直”输入时，检测到值的变化，会不停的发送请求。到我们通过防抖处理后，则当用户“多次”点击或者输入时，只执行最后一次的结果。

        总结：“手抖”、“多次”、“不停”。可以总结为一句话：当用户一直操作的情况下，不会触发对应的操作，到用户停止操作后才会执行对应的操作。

        主要实现依据：setTimeout（延时器）。将用户操作的结果延迟到指定时间后触发，在对应的时间段内，再次触发事件，则清除上次的延时器，开启下一次的延时器，彼此反复。

<template>
  <div>
    <button @click="state">防抖</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeId: "",
    };
  },
  methods: {
    //当用户触发state事件后，会清除上一次的延时器，并开启一个新的延时器，
    // 当用户停止操作一秒钟后，才会触发延时器中的方法，持续点击不会触发
    state() {
      clearTimeout(this.timeId);
      this.timeId = setTimeout(() => {
        //查询方法
        console.log(9999999);
      }, 1000);
    },
  },
};
</script>

<style>
</style>

二、节流

        节流，可以理解为减少事件触发的频率，比如：一段时间内该事件不停的触发，触发了一千次，项一条庞大的事件流，而节流就是在这一段时间内，值允许触发一次该事件。从而将庞大的事件流进行截断限流。例如：鼠标移动事件等高频率触发的事件方法，可以通过节流进行处理，避免性能的浪费。

        总结：“截断”、“限流”。在一定的时间段内只能触发一次。与防抖相比，防抖只有一直点击操作就不会触发对应的操作。而节流则是就算你一直点击，在一段时间内也会触发一次。

        主要实现依据：setTimeout（定时器）。判断定时器是否存在，如果不存在则开启一个新的定时器，在该定时器中执行对应的逻辑或请求，然后清除该定时器。判断定时器是否存在，如果存在则return。

<template>
  <div>
    <button @click="state">节流</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeId: "",
    };
  },
  methods: {
    state() {
      //如果存在定时器则return不再向下执行
      if (this.timeId) {
        return;
      } else {
      //如果不存在定时器则创建一个定时器，在多长时间后执行，执行完成后执行方法或逻辑并关闭该定时器。
      //然后不存在定时器，如此反复
        this.timeId = setTimeout(() => {
          console.log(88888);
          localStorage.setItem(this.lastTimeStoreId, new Date().getTime());
          clearTimeout(this.timeId);
          this.timeId = null;
        }, 1000);
      }
    },
  },
};
</script>

<style>
</style>