小編給大家分享一下如何解決vue項(xiàng)目開發(fā)中setTimeout等定時(shí)器的管理問題，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括三元網(wǎng)站建設(shè)、三元網(wǎng)站制作、三元網(wǎng)頁制作以及三元網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，三元網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到三元省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

一、問題來源。

在項(xiàng)目中，我們經(jīng)常有這樣的需求，一個(gè)頁面初始化后，需要不斷的去請(qǐng)求后端，來獲取當(dāng)前某個(gè)記錄的最新狀態(tài)。

顯然，這個(gè)可以用setTimeout以及回調(diào)中繼續(xù)setTimeout來實(shí)現(xiàn)。

我們假設(shè)定時(shí)器是在頁面#/test/aaa上創(chuàng)建的。

但是，會(huì)遇到以下兩個(gè)問題，我從#/test/aaa   這個(gè)頁面切換到  #/test/bbb頁面后如果停留在#/test/bbb，定時(shí)器還在跑。

其次，如果我不斷在#/test/aaa 和 #/test/bbb兩個(gè)頁面之間不斷的切換，而且切換時(shí)間小于定時(shí)器的間隔時(shí)間時(shí)，也會(huì)出現(xiàn)

重復(fù)創(chuàng)建setTimeout的情況。

現(xiàn)在的問題就是，我們?nèi)绾巫龅焦芾矶〞r(shí)器。

二、示例代碼。

created() {
  if ( this.timeOut ) {
    clearTimeout(this.timeOut);
  }
  this.getListIng();
},
computed: {
  timeOut: {
    set (val) {
      this.$store.state.timeout.compileTimeout = val;
    },
    get() {
      return this.$store.state.timeout.compileTimeout;
    }
  },
},
methods: {
  getListIng() {
    // 這里是一個(gè)http的異步請(qǐng)求
    if ( getUrlModule() == 'aaa' ) {
      let _this = this;
      this.timeOut = setTimeout(() => {
        _this.getListIng();
      }, 5000);
    } else {
      this.timeOut = '';
    }
  },
}

（1）如上面代碼所示，當(dāng)創(chuàng)建頁面（created執(zhí)行）時(shí)，會(huì)先判斷變量this.timeOut是否存在，如果存在，先clearTimeout掉。

（2）而，this.timeOut這個(gè)變量對(duì)應(yīng)的是全局store里的this.$store.state.timeout.compileTimeout。并且是雙向綁定的，這個(gè)

請(qǐng)自行搜索vue2.0中computed用法。

 （3）在我們的主函數(shù)getListIng()中，會(huì)先使用函數(shù)getUrlModule()根據(jù)url判斷當(dāng)前頁面是否是aaa頁面，如果是的，就執(zhí)行setTimeOut，

如果不是，就不行執(zhí)行了，并且設(shè)置this.timeOut = '';

我們假設(shè)上面沒有if ( getUrlModule() == 'aaa' ) 這句判斷，會(huì)出現(xiàn)，當(dāng)我們已經(jīng)跳出了當(dāng)前aaa頁面，去了bbb頁面并且一直停留在bbb頁面時(shí)，

還有setTimeout在執(zhí)行，就會(huì)不斷有http的請(qǐng)求。

如果沒有if ( this.timeOut ) { clearTimeout(this.timeOut); } 這句代碼。當(dāng)我們不斷在2個(gè)頁面之間切換時(shí)，且切換的頻率很高。會(huì)出現(xiàn)多次創(chuàng)建

setTimeout的情況。這個(gè)邏輯稍微有點(diǎn)繞，請(qǐng)閱讀者自行演算。

三、我們必須清楚的事實(shí)。

（1）vue中$store里創(chuàng)建的變量，其實(shí)是全局變量，這個(gè)變量在切換頁面時(shí)不會(huì)清除，當(dāng)我們刷新頁面時(shí)會(huì)清除掉。

（2）在前端頁面中，當(dāng)我們刷新頁面時(shí)，會(huì)將當(dāng)前頁面之前創(chuàng)建的setTimeout以及其他定時(shí)器都清除掉。但是，切換頁面（僅僅是路由切換）

是不會(huì)清除的。

（3）setTimeout、setinterval有本質(zhì)的不同，前者只執(zhí)行一次，除非你在回調(diào)中，不斷的調(diào)用，而后者是不間斷調(diào)用的。但是，我在各種實(shí)踐中發(fā)現(xiàn)，

還是setTimeout好用。因?yàn)椋瑂etTimeout可以根據(jù)條件，及時(shí)在回調(diào)中停用。如果采用setinterval，我們很有可能捕捉不到停用的條件而無法停用。

補(bǔ)充：Vue之SetTimeout

1.前言

相信很多人都遇到過這樣的問題，頁面數(shù)據(jù)需要不斷的刷新，也就是不斷的發(fā)送ajax請(qǐng)求來更新數(shù)據(jù)，那么在vue中怎樣做才比較好呢？這里介紹一下我踩的坑，以及解決方案

2.問題

settimeout用來調(diào)用請(qǐng)求數(shù)據(jù)，但是我遇到的問題就是，沒有用合適的方式去關(guān)閉settimeout,出現(xiàn)了離開當(dāng)前頁面，請(qǐng)求還在不斷的發(fā)送問題，這樣給服務(wù)器帶來了無必要的壓力。附上之前的代碼：

self.deployTimeOutId = setTimeout(() => {
              self.getDeployList(false);
            }, 5000);

說明：這一段代碼是嵌在getDeployList方法中的，離開當(dāng)前頁面的是時(shí)候，必須要去手動(dòng)的把這個(gè)settimeout清除才行。一般這個(gè)寫在destoryed()這個(gè)鉤子里。

window.clearTimeout(this.deployTimeOutId);

雖然這樣處理了，但在邏輯比較復(fù)雜的情況下，還是出現(xiàn)了沒有關(guān)閉的情況，而且排查起來很痛苦。下面介紹一種針對(duì)Vue比較好的做法。

3.解決方案

  let self=this;
  if (self && !self._isDestroyed) {
            setTimeout(() => {
              if (self && !self._isDestroyed)
                self.getDeployList();
            }, 5000);
          }

_isDestroyed這個(gè)屬性表示的是當(dāng)前這個(gè)組件是否有被銷毀，true表示當(dāng)前的組件已經(jīng)被銷毀，通過上面這個(gè)判斷，我們就不需要自己手動(dòng)的去用ID來清除了，這個(gè)就相當(dāng)于遞歸嘛，有了一個(gè)結(jié)束判斷，避免了死循環(huán)咯~~

看完了這篇文章，相信你對(duì)“如何解決vue項(xiàng)目開發(fā)中setTimeout等定時(shí)器的管理問題”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享題目：如何解決vue項(xiàng)目開發(fā)中setTimeout等定時(shí)器的管理問題-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://www.chinadenli.net/article16/dceegg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、做網(wǎng)站、網(wǎng)站策劃、網(wǎng)站維護(hù)、建站公司、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)