在vue組件中設置定時器和清除定時器

由於項目中難免會碰到需要實時刷新，無論是獲取簡訊碼，還是在支付完成後輪詢獲取當前最新支付狀態，這時就需要用到定時器。
但是，定時器如果不及時合理地清除，會造成業務邏輯混亂甚至應用卡死的情況，這個時就需要清除定時器。
某個頁面中啟動定時器後，一定要在頁面關閉時將定時器清除掉。即在頁面卸載（關閉）的生命周期函數里，清除定時器。

<template>
    <view>
        <button @click="getStatus">{{ buttonText }}</button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                timer: null, //首先我在data函數裡面進行定義定時器名稱：
                buttonText : '輪詢獲取訂單支付狀態',
                timerNum: 60 // 設置定時器時間
            }
        },
        methods: {
            getStatus() {
                this.loading(); // 啟動定時器
                this.timer = setInterval(() => {  //創建定時器
                    if (this.timerNum === 0) { // 設置的定時器時間為0後執行的操作
                        this.timer && this.clearTimer(); // 關閉定時器
                        window.open('https://nav.imaring.com/', '_blank'); // 在新視窗打開程式員網址導航
                    } else {
                        this.loading();
                    }
                }, 1000);
            },
            loading() { // 啟動定時器
                this.timerNum -= 1; // 定時器減1
                this.text = '獲取中(' + this.timerNum + ')';
            },
            clearTimer() {//清除定時器
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        // 最後在beforeDestroy()生命周期內清除定時器：
        beforeDestroy() {
            clearInterval(this.timer);        
            this.timer = null;
        }
    }
</script>

小編推薦：程式員網址導航

作為一名碼農，隨著平時工作的需要，這裡收集了國內外很多優秀網站，這其中包括線上工具、線上運行、免費介面、線上資源、線上學習、技術論壇、技術博客等等，滿足一般程式員日常需求。