Problem description

In our projects, we often need to use timers to do some repetitive tasks, such as interface polling to update data. This article documents some considerations for using timers in vUE projects.

Matters needing attention

When using timers, we should pay attention to the following situations

  • When do I start the setInterval() timer
    • Use the timer as soon as the page comes in
    • Or in the form of events such as clicking a button to start using a timer
  • When does the setInterval() timer end
    • Clear the timer when the page leaves
    • Or clear timers in the form of events such as button clicks
  • In particular, note whether timers are used in cached components
    • That is, whether to use a timer in a component wrapped by keep-alive

In case one, use timer in case of click event

Suppose we have two buttons, click on the start timer and click on the end timer. The code is as follows:

<template>
  <div>
    <el-button type="primary" plain @click="start">Click start timer</el-button>
    <el-button type="primary" plain @click="end">Click end timer</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null.// The initial timer variable is null
    };
  },
  methods: {
    start() {
      // Assign the timer name to the variable
      this.timer = setInterval(() = > {
        console.log("Start" -- -);
      }, 1000);
    },
    end() {
      clearInterval(this.timer);
      this.timer = null // Return to the default value
      // As we all know, the timer returns a random integer, which is used to indicate the timer number. The name can be used to cancel the execution of the timer.
      console.log(this.timer); }},// The timer must be cleared when leaving the page (for example, to switch to another page). If it is not cleared manually, it will always exist and be executed
  // Until our project service stops or is powered off. Therefore, it is necessary to remove the timer when appropriate. Otherwise, it costs performance and tends to clutter up the code
  beforeDestroy() {
    // The clearInterval method is used to clear timers
    clearInterval(this.timer);
  },
  BeforeDestroy or destroyed hooks can remove this timer
  // destroyed() {
  // // clearInterval(this.timer);
  // },
};
</script>
Copy the code

Mounted hook if the page is mounted and a timer is executed, insert an IF hook into the mounted hook to set the page to run. The code is as follows:

Mounted Hook The register timer must be cleared in a timely manner

mounted() {
    this.getConsole()
     /* In the initial case, when the project is just opened, there must be no timer on the page, so the logic will go else, at this time, a timer will be registered to call the corresponding logic code. Clear the timer in the beforeDestroy hook. Case 2: Close the project. After closing the project, the system automatically stops the timer. BeforeDestroy and Destroyed hooks are not implemented. Delete beforeDestroy and Destroyed hooks. Mounted hooks are deleted if there is a timer
    if (this.timer) {
      clearInterval(this.timer);
    } else {
      this.timer = setInterval(this.getConsole, 1000); }},methods: {
    getConsole() {
      console.log("Timer"); }},beforeDestroy() {
    clearInterval(this.timer);
  },
Copy the code

In case two, a timer is used in keep-alive

If a keep-alive component is wrapped around it, the lifecycle of the component is as follows:

- Created > Mounted > activated > deactivated - Subsequent generated and removed components -> deactivatedCopy the code

So if you want to use a timer in a keep-alive component and want to execute the timer as soon as the component enters, you have to write the timer in the Deactivated hook. BeforeDestroy, destroyed, and Mounted hooks are executed only once for keep-alive components.

For click event execution or clear timer, just write normal

Timer execution:

activated () {
    // Clear the timer in time
    if(this.timer){
        clearInterval(this.timer);
    }else{
        this.timer = setInterval(() = > {
            console.log("Start" -- -);
          }, 1000); }},Copy the code

Timer clear:

deactivated () {
    clearInterval(this.timer)
    this.timer = null
  },
Copy the code

If you want to learn more about the use of keep-alive in detail, please visit my other article: juejin.cn/post/696250…