Vue中使用定時(shí)器(setInterval、setTimeout)的兩種方式
js中定時(shí)器有兩種,一個(gè)是循環(huán)執(zhí)行 setInterval,另一個(gè)是定時(shí)執(zhí)行 setTimeout。
注意:定時(shí)器需要在頁面銷毀的時(shí)候清除掉,不然會(huì)一直存在!
1. 循環(huán)執(zhí)行( setInterval )
顧名思義,循環(huán)執(zhí)行就是設(shè)置一個(gè)時(shí)間間隔,每過一段時(shí)間都會(huì)循環(huán)執(zhí)行這個(gè)方法,直到這個(gè)定時(shí)器被銷毀掉;
語法:
setInterval(code, milliseconds); setInterval(function, milliseconds, param1, param2, ...); code/function 必需。要調(diào)用一個(gè)代碼串,也可以是一個(gè)函數(shù)。 milliseconds 必須。周期性執(zhí)行或調(diào)用 code/function 之間的時(shí)間間隔,以毫秒計(jì)。 param1, param2, ... 可選。 傳給執(zhí)行函數(shù)的其他參數(shù)(IE9 及其更早版本不支持該參數(shù))。 返回值: 返回一個(gè) ID(數(shù)字),可以將這個(gè)ID傳遞給 clearInterval() 來取消執(zhí)行。
eg:
開始的時(shí)候創(chuàng)建了一個(gè)定時(shí)器 setInterval ,時(shí)間間隔為2秒,每2秒都會(huì)調(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); // 注意: 第一個(gè)參數(shù)為方法名的時(shí)候不要加括號(hào);
},
valChange() {
this.value++;
console.log(this.value);
},
over(){
clearInterval(this.timer);
}
},
mounted() {},
beforeDestroy() {
clearInterval(this.timer);
},
};
</script>
2. 定時(shí)執(zhí)行 ( setTimeout)
定時(shí)執(zhí)行 setTimeout 是設(shè)置一個(gè)時(shí)間,等待時(shí)間到達(dá)的時(shí)候只執(zhí)行一次,但是執(zhí)行完以后定時(shí)器還在,只是不再運(yùn)行;
語法:
setTimeout(code, milliseconds, param1, param2, ...) setTimeout(function, milliseconds, param1, param2, ...) code/function 必需。要調(diào)用一個(gè)代碼串,也可以是一個(gè)函數(shù)。 milliseconds 可選。執(zhí)行或調(diào)用 code/function 需要等待的時(shí)間,以毫秒計(jì)。默認(rèn)為 0。 param1, param2, ... 可選。 傳給執(zhí)行函數(shù)的其他參數(shù)(IE9 及其更早版本不支持該參數(shù))。 返回值: 返回一個(gè) ID(數(shù)字),可以將這個(gè)ID傳遞給 clearTimeout() 來取消執(zhí)行。
eg:
開始時(shí)候創(chuàng)建一個(gè)定時(shí)器 setTimeout,只在2秒后執(zhí)行一次方法。
let timer = setTimeout(() => {
//需要定時(shí)執(zhí)行的代碼
console.debug("Hello World");
}, 2000)到此這篇關(guān)于Vue中 使用定時(shí)器 (setInterval、setTimeout)的文章就介紹到這了,更多相關(guān)Vue使用定時(shí)器 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue組件重新渲染(組件重載)的3種實(shí)現(xiàn)方式
這篇文章主要介紹了Vue組件重新渲染(組件重載)的3種實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue3?攜手?TypeScript?搭建完整項(xiàng)目結(jié)構(gòu)
TypeScript 是JS的一個(gè)超級(jí),主要提供了類型系統(tǒng)和對(duì)ES6的支持,使用 TypeScript 可以增加代碼的可讀性和可維護(hù)性,在 react 和 vue 社區(qū)中也越來越多人開始使用TypeScript,這篇文章主要介紹了Vue3?攜手?TypeScript?搭建完整項(xiàng)目結(jié)構(gòu),需要的朋友可以參考下2022-04-04
Vue使用pdf-lib實(shí)現(xiàn)為文件流添加水印并預(yù)覽
這篇文章主要為大家詳細(xì)介紹了Vue如何使用pdf-lib實(shí)現(xiàn)為文件流添加水印并預(yù)覽的功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下2023-03-03
vue動(dòng)態(tài)禁用控件綁定disable的例子
今天小編就為大家分享一篇vue動(dòng)態(tài)禁用控件綁定disable的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue3+Element Plus進(jìn)行圖片加載優(yōu)化全攻略
在Web開發(fā)中,未優(yōu)化的圖片會(huì)導(dǎo)致很多問題,本文將為大家介紹一下Vue3如何通過Element Plus進(jìn)行圖片加載優(yōu)化,希望對(duì)大家有所幫助2025-03-03
vue實(shí)現(xiàn)token登錄驗(yàn)證的完整實(shí)例
最近公司新啟動(dòng)了個(gè)項(xiàng)目,用的是vue框架在做,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)token登錄驗(yàn)證的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04

