vue.js怎麼讓網頁定時刷新

vue.js讓網頁定時刷新的方法：1、執行函數【setTimeout(function(){}, milliseconds)】；2、在執行定時器前先執行一次取得介面資料的運算子。

【相關文章推薦：#vue.js##】

vue.js讓網頁定時刷新的方法：

js有兩種定時器

• setInterval(function(){}, milliseconds)－會不停的呼叫函數

• setTimeout(function(){}, milliseconds)－只執行函數一次

乍看之下，setInterval會符合我們的業務需求，然而也需要注意一些坑，單純的使用setInterval會導致頁面卡住！原因與JS引擎線程有關, 用通俗話說就是setInterval不會清除定時器隊列，每重複執行1次都會導致定時器疊加，最終卡死你的網頁。

但是setTimeout是自帶清除定時器的，因此正確解決方法如下：

data(){
  return {
       timer:null, //定时器名称
    }
},
mounted(){
   this.queryInfo();
   this.timer = setInterval(() => {
       setTimeout(this.queryInfo, 0)
   }, 1000*60)
},
methods: {
   queryInfo(){
    //do something
   },
},
beforeDestroy(){
   clearInterval(this.timer);        
   this.timer = null;
}

說明: 1.在執行定時器前先執行一次獲取接口數據的操作函數, 否則接口會1分鐘後才呼叫

         2.為了避免退出目前頁面後,在其他頁面也繼續呼叫介面,退出前需要清除定時器.

#清除定時器最佳化方案

上面的清除定時器方案有兩點不好:

• 它需要在這個元件實例中保存這個timer，如果可以的話最好只有生命週期鉤子可以存取到它。這並不算嚴重的問題，但是它可以被視為雜物。

• 我們的建立程式碼獨立於我們的清理程式碼，這使得我們比較難於程式化的清理我們建立的所有東西

優化方案:

透過

$once這個事件偵聽器器在定義完定時器之後的位置來清除定時器.

const timer = setInterval(() =>{                    
    // 某些定时器操作                
}, 500);            
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
})

相關免費學習推薦：

javascript（影片）

以上是vue.js怎麼讓網頁定時刷新的詳細內容。更多資訊請關注PHP中文網其他相關文章！