This is the 9th day of my participation in the August More Text Challenge. For details, see:August is more challenging

There are two kinds of timers in JS. One is to execute setInterval in a loop, and the other is to execute setTimeout regularly.

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

1. Loop execution (setInterval)

As the name implies, loop execution is to set a time interval for the method to be executed in a loop until the timer is destroyed.

Grammar:

setInterval(code, milliseconds);setInterval(function.milliseconds.param1.param2,...). ;code/functionA necessity. To call a code string, it can also be a function.millisecondsMust be. To execute or invoke periodicallycode/functionThe time interval, measured in milliseconds.param1.param2. Optional. Other arguments passed to the executing function (IE9And earlier versions do not support this parameter). Return value: Returns oneID(number), you can put thisIDPassed to theclearInterval() to cancel execution.Copy the code

eg:

We start by creating a timer setInterval of 2 seconds, and call valChange every 2 seconds to add 1 to the value of value.

<template>
  <div>
    <h1>{{value}}</h1>
    <el-button type="primary" @click="start">start</el-button>
    <el-button type="danger" @click="over">The end of the</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: "".value: 0}; },methods: {
    start(){
      this.timer = setInterval(this.valChange, 2000); // Do not use parentheses when the first argument is the method name;
    },
    valChange() {
      this.value++;
      console.log(this.value);
    },
    over(){
      clearInterval(this.timer); }},mounted() {},
  beforeDestroy() {
    clearInterval(this.timer); }};</script>
Copy the code

Effect:

2. Timed execution (setTimeout)

SetTimeout is to set a time, wait for the time to reach the time only to execute once, but after the execution of the timer still, but no longer run;

Grammar:

setTimeout(code, milliseconds, param1, param2, ...)
setTimeout(function.milliseconds.param1.param2,...).code/functionA necessity. To call a code string, it can also be a function.millisecondsOptional. To execute or invoke.code/functionTime required to wait, measured in milliseconds. The default is 0.param1.param2. Optional. Other arguments passed to the executing function (IE9And earlier versions do not support this parameter). Return value: Returns oneID(number), you can put thisIDPassed to theclearTimeout() to cancel execution.Copy the code

eg:

Start by creating a timer setTimeout and execute the method only once after 2 seconds.

<template>
  <div>
    <h1>{{value}}</h1>
    <el-button type="primary" @click="start">start</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: "".value: 0}; },methods: {
    start(){
      this.timer = setTimeout(this.valChange, 2000); // Do not use parentheses when the first argument is the method name;
    },
    valChange() {
      this.value++;
      console.log(this.value); }},mounted() {},
  beforeDestroy() {
    clearTimeout(this.timer); }};</script>
Copy the code

Effect: