The vue timer cannot be cleared, resulting in frequent function execution problems

The vue timer cannot be cleared, resulting in frequent execution of functions

Timer clearing problem in front-end Vue project

Method 1:

Regular use and clearance

clearInterval()//Clear the timer before use = setInterval(()=>{
    (1)
}, 1000)

Method 2:

Use arrays to store the identity of each timer to avoid some reasons that the timer cannot be cleared (such as repeated page initialization)

if(!){  = []}
// Clear the saved timer together(item=>{
    clearInterval(item)
})
const timerId = setInterval(()=>{
    (1)
}, 1000)
(timerId)

Use timers (setInterval, setTimeout) in vue

There are two types of timers in js. One is to execute setInterval loop, and the other is to execute setTimeout regularly.

Note: The timer needs to be cleared when the page is destroyed, otherwise it will always exist!

1. Loop execution (setInterval)

As the name suggests, loop execution is to set a time interval, and the method will be executed cycled every time a while until the timer is destroyed;

grammar:

setInterval(code, milliseconds)；
setInterval(function, milliseconds, param1, param2, ...)； 

• code/function required. To call a code string, it can also be a function.
• millionseconds Must. The interval between periodic execution or calling code/function, in milliseconds.
• param1, param2, ... optional. Other parameters passed to the execution function (which is not supported by IE9 and earlier versions).

Return value:       Return an ID (number), which can be passed to clearInterval() to cancel the execution.

eg:

At the beginning, a timer is created with a time interval of 2 seconds. The function valChange is called every 2 seconds, so that the value of value +1.

<template>
  <div>
    <h1>{{value}}</h1>
    <el-button type="primary" @click="start">start</el-button>
    <el-button type="danger" @click="over">Finish</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timer: "",
      value: 0,
    };
  },
  methods: {
    start(){
       = setInterval(, 2000); // Note: Do not add brackets when the first parameter is the method name;    },
    valChange() {
      ++;
      ();
    },
    over(){
      clearInterval();
    }
  },
  mounted() {},
  beforeDestroy() {
    clearInterval();
  },
};
</script>

2. Timed execution (setTimeout)

Timed execution setTimeout is to set a time, and only execute once when the waiting time arrives, but the timer is still there after execution, but it is not running anymore;

grammar:

setTimeout(code, milliseconds, param1, param2, ...)
setTimeout(function, milliseconds, param1, param2, ...)

• code/function required. To call a code string, it can also be a function.
• Milliseconds are optional. The time required to wait in milliseconds for code/function to be executed or called. The default is 0.
• param1, param2, ...  Optional. Other parameters passed to the execution function (which is not supported by IE9 and earlier versions).

Return value:    Returns an ID (number), which can be passed to clearTimeout() to cancel the execution.

eg:

Start by creating a timer setTimeout, and the method is executed only once in 2 seconds.

let timer = setTimeout(() => {
  //Code that needs to be executed regularly  ("Hello World");
  }, 2000)

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.