該方案已被廢棄，請點擊
【這里】以查看更好的解決方案
pullingCurrentStatus(BackData) {
let PullingCurrentStatusTimer = setInterval(() => {
this.$axios
.post(this.HOST + "/api/pullingcheckstatus", {
//輪詢當前申請的status值
PullingTimeNode: BackData,
})
.then((result) => {
if (result.data.CheckedStatus == "applying") {
this.status = "提交成功，等待審核...";
this.ReturnStatus = "applying";
this.bindcolor = "#ff840f";
console.log(result.data.CheckedStatus);
} else if (result.data.CheckedStatus == "able") {
this.status = "您已經處於隊列中";
this.ReturnStatus = "able";
this.bindcolor = "#07c160";
this.getTheQueuingData()//輪詢前方車輛以及排隊人數
console.log(result.data.CheckedStatus);
this.ifShowNoticeBar = true;
} else if (result.data.CheckedStatus == "denied") {
this.status = "管理員駁回了您的申請";
this.ReturnStatus = "denied";
this.bindcolor = "#fd0303";
console.log(result.data.CheckedStatus);
clearInterval(PullingCurrentStatusTimer); //停止定時器
}
})
.catch((err) => {
console.log(err);
});
}, 2000);
},
簡單的說明，這部分的邏輯代碼是，一個被函數pullingCurrentStatus包裹的定時器，基於axios定時的向web接口發起請求，以實現輪詢的需求。 無需過多的關注代碼，因為沒有業務場景，可能看的迷迷糊糊的。我只是在試圖描述我遇到的問題。
現在，我這里有一個“退出隊列”按鈕，我期望當我點擊改按鈕，將觸發“退出隊列”按鈕所綁定的方法，然后關閉上面的這個輪詢。
可是，問題在於，定時器是被包裹在另一個函數中的局部變量，我怎么在另外的一個方法中去引用定時器變量呢？ 引用不了，我就沒辦法去關閉它。
后來想到了一種辦法，就是，通過在export default{data(){return{ TurnOffTheTimer:false }}}設定一個全局的中間變量，這樣，就可以實現在其他的地方關閉定時器了。其實蠻簡單的，為了說明該方法，我寫了下面這個demo，以供朋友們參考，也方便自己日后鞏固學習之用。
vue
<template>
<div>
<h1>DEMO</h1>
<P>這是一個定時器</P>
<p>現在是北京時間</p>
<p>{{ msg }}</p>
<button @click="startTheTimer">打開定時器</button>
<button @click="turnOffTimer">關閉定時器</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: "",
};
},
methods: {
startTheTimer(){
let BeijingTime = setInterval(()=>{
this.msg = new Date()
console.log(BeijingTime)
},1000)
},
turnOffTimer(){
// console.log("123")
}
}
};
</script>
在以上代碼中，我們定義了一個定時器，每秒鍾刷新一次當下時間，當點擊“打開定時器”后，開始走時：
通同時，我們定義了一個關閉按鈕，但是還沒有執行任何操作。現在我們修改一下代碼：
<template>
<div>
<h1>DEMO</h1>
<P>這是一個定時器</P>
<p>現在是北京時間</p>
<p>{{ msg }}</p>
<button @click="startTheTimer">打開定時器</button>
<button @click="turnOffTimer">關閉定時器</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: "",
IfTurnOffTheTimer: false
};
},
methods: {
startTheTimer() {
let BeijingTime = setInterval(() => {
if (this.IfTurnOffTheTimer == true) {
clearInterval(BeijingTime);
}
this.msg = new Date();
}, 1000);
},
turnOffTimer() {
this.IfTurnOffTheTimer = true;
}
}
};
</script>
我們簡單的修改了一些代碼，在return里面新增了一個名為IfTurnOffTheTimer的變量，並將其初始值設為false,然后我們在定時器中增加了一個if判斷，讓他去判斷變量IfTurnOffTheTimer是否為 true，如果是，則銷毀定時器。 最后，我們在turnOffTimer()方法里，改變改變量的值為true，這就基本上實現了我們的需求，解決了我們的問題。
當然，不難發現，是存在一些小問題的。
例如，我們發現當我們點擊了“關閉定時器按鈕”之后，再點“打開定時器”就沒有反映了。這是當然了，因為 this.IfTurnOffTheTimer = true;解決方法也很簡單，在定時器之前，給它再賦值成false就行了。
startTheTimer() {
this.IfTurnOffTheTimer = false;
let BeijingTime = setInterval(() => {
if (this.IfTurnOffTheTimer == true) {
clearInterval(BeijingTime);
}
this.msg = new Date();
}, 1000);
},
此外，還有一個小問題，就是，我們發現帶點擊“關閉定時器”按鈕之后，並不是立刻被銷毀，而是總是會把定時器內代碼執行完畢先，也就是this.msg = new Date();這行代碼總是會被執行一次。解決辦法也簡單，在它前面給他return一下，讓他停止執行，就可以了。
startTheTimer() {
this.IfTurnOffTheTimer = false;
let BeijingTime = setInterval(() => {
if (this.IfTurnOffTheTimer == true) {
clearInterval(BeijingTime);
return
}
this.msg = new Date();
}, 1000);
},