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

前端Vue項目中定時器清除問題

方法1：

常規(guī)使用和清除

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

方法2：

使用數(shù)組存儲每一個定時器的標識,避免某些原因導致定時器未能清除 (如：頁面重復初始化)

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

vue中使用定時器（setInterval、setTimeout）

js中定時器有兩種，一個是循環(huán)執(zhí)行 setInterval，另一個是定時執(zhí)行 setTimeout。

注意：定時器需要在頁面銷毀的時候清除掉，不然會一直存在！

1. 循環(huán)執(zhí)行（ setInterval ）

顧名思義，循環(huán)執(zhí)行就是設置一個時間間隔，每過一段時間都會循環(huán)執(zhí)行這個方法,直到這個定時器被銷毀掉；

語法：

setInterval(code, milliseconds)；
setInterval(function, milliseconds, param1, param2, ...)；?

• code/function 必需。要調用一個代碼串，也可以是一個函數(shù)。
• milliseconds 必須。周期性執(zhí)行或調用 code/function 之間的時間間隔，以毫秒計。
• param1, param2, ... 可選。 傳給執(zhí)行函數(shù)的其他參數(shù)（IE9 及其更早版本不支持該參數(shù)）。  

返回值:      返回一個 ID（數(shù)字），可以將這個ID傳遞給 clearInterval() 來取消執(zhí)行。

eg:

開始的時候創(chuàng)建了一個定時器 setInterval ，時間間隔為2秒，每2秒都會調用一次函數(shù) valChange，從而使 value 的值+1。

<template>
? <div>
? ? <h1>{{value}}</h1>
? ? <el-button type="primary" @click="start">開始</el-button>
? ? <el-button type="danger" @click="over">結束</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 是設置一個時間，等待時間到達的時候只執(zhí)行一次，但是執(zhí)行完以后定時器還在，只是不再運行；

語法：

setTimeout(code, milliseconds, param1, param2, ...)
setTimeout(function, milliseconds, param1, param2, ...)

• code/function 必需。要調用一個代碼串，也可以是一個函數(shù)。
• milliseconds可選。執(zhí)行或調用 code/function 需要等待的時間，以毫秒計。默認為 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)

總結

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

最新評論