Detailed explanation of the use of anti-shake and throttling (with code analysis)

1. Anti-shake

        Anti-shake can be understood as preventing multiple clicks caused by the user's "hand shake". For example, if the user clicks multiple times on a submit button, multiple submission requests will appear, resulting in data confusion; it can also be used for user input , according to the user input real-time query, when the user "always" input, the change of the value is detected, and the request will be sent continuously. After we pass the anti-shake processing, when the user clicks or enters "multiple times", only the last result will be executed.

        Summary: "Hand shaking", "many times", "non-stop". It can be summed up in one sentence: When the user keeps operating, the corresponding operation will not be triggered, and the corresponding operation will not be executed until the user stops the operation.

        The main implementation basis: setTimeout (delayer). Delay the result of the user's operation until the specified time and trigger. If the event is triggered again within the corresponding time period, the previous delayer will be cleared, and the next delayer will be turned on, repeating each other.

<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>

Two, throttling

        Throttling can be understood as reducing the frequency of event triggers, for example: the event is triggered continuously for a period of time, triggering a thousand times, creating a huge event flow, and throttling is during this period of time, the value allows triggering the event once. In this way, the huge event flow is truncated and limited. For example, event methods triggered frequently, such as mouse movement events, can be processed through throttling to avoid performance waste.

        Summary: "truncation", "current limiting". It can only be triggered once within a certain period of time. Compared with anti-shake, anti-shake will not trigger the corresponding operation only if you keep clicking. And throttling means that even if you keep clicking, it will be triggered once in a period of time.

        The main implementation basis: setTimeout (timer). Determine whether the timer exists, if not, start a new timer, execute the corresponding logic or request in the timer, and then clear the timer. Determine whether the timer exists, and return if it exists.

<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>