vue定時(shí)器清除不掉，導(dǎo)致功能頻繁執(zhí)行

前端Vue項(xiàng)目中定時(shí)器清除問題

方法1：

常規(guī)使用和清除

clearInterval(this.timer)//使用前先清空定時(shí)器
this.timer = setInterval(()=>{
? ? console.log(1)
}, 1000)

方法2：

使用數(shù)組存儲(chǔ)每一個(gè)定時(shí)器的標(biāo)識,避免某些原因?qū)е露〞r(shí)器未能清除 (如：頁面重復(fù)初始化)

if(!window.timer){ window.timer = []}
// 將存起來的定時(shí)器一并清除
window.timer.map(item=>{
? ? clearInterval(item)
})
const timerId = setInterval(()=>{
? ? console.log(1)
}, 1000)
window.timer.push(timerId)

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í)候不要加括號;
? ? },
? ? 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)

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論