vue.js如何讓網頁定時刷新-創新互聯

小編給大家分享一下vue.js如何讓網頁定時刷新，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

成都創新互聯公司是一家專業提供黃島企業網站建設,專注與網站設計、網站制作、H5技術、小程序制作等業務。10年已為黃島眾多企業、政府機構等服務。創新互聯專業網站建設公司優惠進行中。

vue.js讓網頁定時刷新的方法：1、執行函數【setTimeout(function(){}, milliseconds)】；2、在執行定時器前先執行一次獲取接口數據的操作函數。

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);                                    
})

看完了這篇文章，相信你對vue.js如何讓網頁定時刷新有了一定的了解，想了解更多相關知識，歡迎關注創新互聯行業資訊頻道，感謝各位的閱讀！

文章題目：vue.js如何讓網頁定時刷新-創新互聯
標題網址：http://m.kartarina.com/article40/ccgdho.html

成都網站建設公司_創新互聯，為您提供網頁設計公司、面包屑導航、營銷型網站建設、建站公司、App設計、靜態網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯