輪詢的理解

其實輪詢的重點在於間隔多少時間執行一次，而並非迴圈本身。ajax是非同步請求，從發起請求到接受到響應即為一個完整的過程，這個過程所需要的時間是無法預料的，說的極端點，若請求所需的時間超過了我們輪詢的間隔時間，那麼是會出現很多問題的，所以輪詢的間隔應該是在確保這個請求過程完成的基礎之上的，這也更符合邏輯。

業務描述：

1. 頁面初始化顯示第一頁資料，隨後每隔十秒當前頁資料重新整理
2. 更改篩選條件或者更改頁碼直接重新整理資料，隨後每個十秒當前也資料重新整理

業務邏輯點分析：

1. 手動呼叫時，立即執行發起請求
2. 隨後每隔十秒執行一次，重新整理一次列表

實現思路

1. 直接先呼叫請求
2. 在請求的成功回撥函式中設定定時器setTimeout
3. 在定時器內重複1.2操作
4. 將1.2.3步驟封裝為遞迴函式

// 輪詢方法
    polling (page) {
      this.getWorks(page).then(res => {
        this.pollingST = setTimeout(gbjxogatF() => {
          clearTimeout(this.pollingST)
          this.polling(page)
        },10000)
      })
    }

為什麼不採用setInterval

setInterval的功能看似是完美符合輪詢的概念，若我們的操作是同步程式碼，那麼使用setInterval是沒有任何問題的，問題就出在setInterval不夠靈活，我們無法得知上一次請求是否已經完畢。所以setTimeout會更好一些。

需要注意的地方

在輪詢中我將定時器用pollingST變數記錄了下來，每次執行前必須先清除上一個定時器，因為遞迴的呼叫是在定時器內gbjxogatF部，所以通過清除定時器就能很方便的結束輪詢

完整虛擬碼

<script>
export default {
  data () {
    return {
      pollingST: null
    }
  },methods: {
    // 分頁change事件
    pageChange (params) {
      // 清除現有定時器
      clearTimeout(this.pollingST)
      // 呼叫輪詢
      this.polling(params)
    },// 請求介面方法
    getWorks () {
      return new Promise(resolve => resolve({}))
    },// 輪詢方法
    polling (params) {
      this.getWorks(params).then(res => {
        this.pollingST = setTimeout(() => {
 客棧
 
         clearTimeout(this.pollingST)
          this.polling(params)
        },10000)
      })
    }
  },created () {
    // 呼叫輪詢http://www.cppcns.com
    this.polling({ page: 1,pageSize: 5 })
  },destroyed () {
    clearTimeout(this.pollingST)
  }
}
</script>

總結

到此這篇關於輪詢解決方案的文章就介紹到這了,更多相關vue輪詢解決內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！