1、在data中聲明要設(shè)置的定時(shí)器名稱：

    


        


            


            

        

        


            

                data() {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                timer: null  // 定時(shí)器名稱
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },復(fù)制代碼
            

        

    

2、在mounted中創(chuàng)建定時(shí)器：

    


        


            


            

        

        


            

                this.timer = (() => {
            

        

    

    


        


            


            

        

        


            

                // 某些操作
            

        

    

    


        


            


            

        

        


            

                }, 5000)復(fù)制代碼
            

        

    

3、在頁(yè)面注銷時(shí)清理定時(shí)器：

    


        


            


            

        

        


            

                beforeDestroy() {
            

        

    

    


        


            


            

        

        


            

                clearInterval(this.timer);
            

        

    

    


        


            


            

        

        


            

                this.timer = null;
            

        

    

    


        


            


            

        

        


            

                }復(fù)制代碼
            

        

    

然鵝，并沒什么卵用，在切換頁(yè)面后，定時(shí)任務(wù)依然頑強(qiáng)的奔跑著。

    


        


            


            

        

        


            

                beforeDestroy() {
            

        

    

    


        


            


            

        

        


            

                clearInterval(this.timer);
            

        

    

    


        


            


            

        

        


            

                this.timer = null;
            

        

    

    


        


            


            

        

        


            

                console.log(this.timer)            //輸出為: null,但是任務(wù)依然在繼續(xù)運(yùn)行
            

        

    

    


        


            


            

        

        


            

                }復(fù)制代碼
            

        

    

可能是我的姿勢(shì)不對(duì)吧。害羞.jpg

經(jīng)過在各大論壇一番查找發(fā)現(xiàn)：

通過$once這個(gè)事件偵聽器在定義完定時(shí)器之后的位置來(lái)清除定時(shí)器：

    


        


            


            

        

        


            

                const timer = setInterval(() =>{
            

        

    

    


        


            


            

        

        


            

                // 某些定時(shí)器操作
            

        

    

    


        


            


            

        

        


            

                }, 5000);
            

        

    

    


        


            


            

        

        


            

                // 通過$once來(lái)監(jiān)聽定時(shí)器
            

        

    

    


        


            


            

        

        


            

                // 在beforeDestroy鉤子觸發(fā)時(shí)清除定時(shí)器
            

        

    

    


        


            


            

        

        


            

                this.$once('hook:beforeDestroy', () => {
            

        

    

    


        


            


            

        

        


            

                clearInterval(timer);
            

        

    

    


        


            


            

        

        


            

                }) 復(fù)制代碼
            

        

    

哇，成功了...

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)