Using Vue to implement timer function

This article example shares the specific code of Vue to implement the timer function for your reference. The specific content is as follows

First we need to know the difference between setTimeout and setInterval

setTimeout is only executed once after the specified time. The code is as follows:

<script>  
//Timer runs asynchronously function hello(){  
alert("hello");  
}  
//Execute the method using the method name var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//Use string execution method window.clearTimeout(t1);//Remove the timer</script>

setInterval executes in a cycle with a specified time period. The code is as follows:

//Real-time refresh time unit is milliseconds setInterval('refreshQuery()',8000);   
/* Refresh query */  
function refreshQuery(){  
   $("#mainTable").datagrid('reload',null);  
}

In general, setTimeout is used to delay the execution of a method or function.
setInterval is generally used to refresh forms, and refresh synchronization at a specified time for some forms

Timer

HTML Code

<div class="father">
  <ul>
   <li>{{one}}<span>:</span></li>
   <li>{{two}}<span>:</span></li>
   <li>{{three}}</li>
  </ul>
  <el-button type="primary" @click="startHandler">Start</el-button>
  <el-button type="primary" @click="endHandler">Pause</el-button>
</div>

JAVASCRIPT CODE

<script>
export default {
  name: 'HelloWorld',
  data(){
   return {
  flag: null,
  one : '00', // hour two : '00', // minute three : '00', // second abc : 0, // count of seconds cde : 0, // count of minutes efg : 0, // count of hours }
  },
  props: {
    msg: String
  },
  mounted() {
   
  },
  methods:{
  // Start timing startHandler(){
  this.flag = setInterval(()=>{
   if(this.three === 60 || this.three === '60'){
    this.three = '00';
    this.abc = 0;
    if(this.two === 60 || this.two === '60'){
     this.two = '00';
     this.cde = 0;
     if(this.efg+1 <= 9){
      this.efg++;
      this.one = '0' + this.efg;
     }else{
      this.efg++;
      this.one = this.efg;
     }
    }else{
     if(this.cde+1 <= 9){
      this.cde++;
      this.two = '0' + this.cde;
     }else{
      this.cde++;
      this.two = this.cde;
     }
    }
   }else{
    if(this.abc+1 <= 9){
     this.abc++;
     this.three = '0' + this.abc;
    }else{
     this.abc++;
     this.three=this.abc;
    }
   }
   
  },100)
 },
 // Pause timing endHandler(){
  this.flag = clearInterval(this.flag)
 }
  }
}
</script>

The effect is as follows:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Implementing a simple timer based on Vue method
Vue-cli framework implements timer application
Vue.js implements simple timer function
Vue implements a simple timer component
How to implement Vue timer
Detailed usage of Vue timer
Solve the problem of timer continuing to execute after Vue component is destroyed
Vue example code using timer to achieve marquee effect
Implementation code of vue timer component
How to encapsulate timer components in Vue3

<<: Quickly solve the problem of slow startup after Tomcat reconfiguration

>>: How to connect Django 2.2 to MySQL database