Vue中使用定時器(setInterval、setTimeout)的兩種方式
js中定時器有兩種,一個是循環(huán)執(zhí)行 setInterval,另一個是定時執(zhí)行 setTimeout。
注意:定時器需要在頁面銷毀的時候清除掉,不然會一直存在!
1. 循環(huán)執(zhí)行( setInterval )
顧名思義,循環(huán)執(zhí)行就是設(shè)置一個時間間隔,每過一段時間都會循環(huán)執(zhí)行這個方法,直到這個定時器被銷毀掉;
語法:
setInterval(code, milliseconds); setInterval(function, milliseconds, param1, param2, ...); code/function 必需。要調(diào)用一個代碼串,也可以是一個函數(shù)。 milliseconds 必須。周期性執(zhí)行或調(diào)用 code/function 之間的時間間隔,以毫秒計。 param1, param2, ... 可選。 傳給執(zhí)行函數(shù)的其他參數(shù)(IE9 及其更早版本不支持該參數(shù))。 返回值: 返回一個 ID(數(shù)字),可以將這個ID傳遞給 clearInterval() 來取消執(zhí)行。
eg:
開始的時候創(chuàng)建了一個定時器 setInterval ,時間間隔為2秒,每2秒都會調(diào)用一次函數(shù) valChange,從而使 value 的值+1。
<template>
<div>
<h1>{{value}}</h1>
<el-button type="primary" @click="start">開始</el-button>
<el-button type="danger" @click="over">結(jié)束</el-button>
</div>
</template>
<script>
export default {
data() {
return {
timer: "",
value: 0,
};
},
methods: {
start(){
this.timer = setInterval(this.valChange, 2000); // 注意: 第一個參數(shù)為方法名的時候不要加括號;
},
valChange() {
this.value++;
console.log(this.value);
},
over(){
clearInterval(this.timer);
}
},
mounted() {},
beforeDestroy() {
clearInterval(this.timer);
},
};
</script>
2. 定時執(zhí)行 ( setTimeout)
定時執(zhí)行 setTimeout 是設(shè)置一個時間,等待時間到達的時候只執(zhí)行一次,但是執(zhí)行完以后定時器還在,只是不再運行;
語法:
setTimeout(code, milliseconds, param1, param2, ...) setTimeout(function, milliseconds, param1, param2, ...) code/function 必需。要調(diào)用一個代碼串,也可以是一個函數(shù)。 milliseconds 可選。執(zhí)行或調(diào)用 code/function 需要等待的時間,以毫秒計。默認(rèn)為 0。 param1, param2, ... 可選。 傳給執(zhí)行函數(shù)的其他參數(shù)(IE9 及其更早版本不支持該參數(shù))。 返回值: 返回一個 ID(數(shù)字),可以將這個ID傳遞給 clearTimeout() 來取消執(zhí)行。
eg:
開始時候創(chuàng)建一個定時器 setTimeout,只在2秒后執(zhí)行一次方法。
let timer = setTimeout(() => {
//需要定時執(zhí)行的代碼
console.debug("Hello World");
}, 2000)到此這篇關(guān)于Vue中 使用定時器 (setInterval、setTimeout)的文章就介紹到這了,更多相關(guān)Vue使用定時器 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue filter格式化時間戳?xí)r間成標(biāo)準(zhǔn)日期格式的方法
今天小編就為大家分享一篇Vue filter格式化時間戳?xí)r間成標(biāo)準(zhǔn)日期格式的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
初學(xué)vue出現(xiàn)空格警告的原因及其解決方案
今天小編就為大家分享一篇初學(xué)vue出現(xiàn)空格警告的原因及其解決方案,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
springboot+vue+對接支付寶接口+二維碼掃描支付功能(沙箱環(huán)境)
這篇文章主要介紹了springboot+vue+對接支付寶接口+二維碼掃描支付(沙箱環(huán)境),本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-10-10

