**
首先我們要知道setTimeout和setInterval的區別
**
setTimeout只在指定時間后執行一次，代碼如下：
<script>
//定時器 異步運行
function hello(){
alert("hello");
}
//使用方法名字執行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串執行方法
window.clearTimeout(t1);//去掉定時器
</script>
setInterval以指定時間為周期循環執行，代碼如下：
//實時刷新時間單位為毫秒
setInterval('refreshQuery()',8000);
/* 刷新查詢 */
function refreshQuery(){
$("#mainTable").datagrid('reload',null);
}
一般情況下setTimeout用于延遲執行某方法或功能，
setInterval則一般用于刷新表單，對于一些表單的實時指定時間刷新同步
**
計時器
**
HTML代碼
<div class="father">
<ul>
<li>{{one}}<span>:</span></li>
<li>{{two}}<span>:</span></li>
<li>{{three}}</li>
</ul>
<el-button type="primary" @click="startHandler">開始</el-button>
<el-button type="primary" @click="endHandler">暫停</el-button>
</div>
JAVASCRIPT代碼
<script>
export default {
name: 'HelloWorld',
data(){
return {
flag: null,
one : '00', // 時
two : '00', // 分
three : '00', // 秒
abc : 0, // 秒的計數
cde : 0, // 分的計數
efg : 0, // 時的計數
}
},
props: {
msg: String
},
mounted() {
},
methods:{
// 開始計時
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)
},
// 暫停計時
endHandler(){
this.flag = clearInterval(this.flag)
}
}
}
</script>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
-
58
-
59
-
60
-
61
-
62
-
63
-
64
-
65
效果如下：
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：csdn 作者：rock_23
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.newchinaweekly.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
