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

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供黃島企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為黃島眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

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

vue.js讓網(wǎng)頁定時(shí)刷新的方法：

js有兩種定時(shí)器

• setInterval(function(){}, milliseconds)——會(huì)不停的調(diào)用函數(shù)

• setTimeout(function(){}, milliseconds)——只執(zhí)行函數(shù)一次

乍看之下，setInterval會(huì)符合我們的業(yè)務(wù)需求，然而也需要注意一些坑，單純的使用setInterval會(huì)導(dǎo)致頁面卡死！其原因與JS引擎線程有關(guān), 用通俗話說就是setInterval不會(huì)清除定時(shí)器隊(duì)列，每重復(fù)執(zhí)行1次都會(huì)導(dǎo)致定時(shí)器疊加，最終卡死你的網(wǎng)頁。

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

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

說明: 1.在執(zhí)行定時(shí)器前先執(zhí)行一次獲取接口數(shù)據(jù)的操作函數(shù), 否則接口會(huì)1分鐘后才調(diào)用

2.為了避免退出當(dāng)前頁面后,在其他頁面也繼續(xù)調(diào)用接口,退出前需要清除定時(shí)器.

清除定時(shí)器優(yōu)化方案

上面的清除定時(shí)器方案有兩點(diǎn)不好:

• 它需要在這個(gè)組件實(shí)例中保存這個(gè) timer，如果可以的話好只有生命周期鉤子可以訪問到它。這并不算嚴(yán)重的問題，但是它可以被視為雜物。

• 我們的建立代碼獨(dú)立于我們的清理代碼，這使得我們比較難于程序化的清理我們建立的所有東西

優(yōu)化方案:

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

const timer = setInterval(() =>{                    
    // 某些定時(shí)器操作                
}, 500);            
// 通過$once來監(jiān)聽定時(shí)器，在beforeDestroy鉤子可以被清除。
this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
})

看完了這篇文章，相信你對vue.js如何讓網(wǎng)頁定時(shí)刷新有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站名稱：vue.js如何讓網(wǎng)頁定時(shí)刷新-創(chuàng)新互聯(lián)
URL地址：http://weahome.cn/article/ccgdho.html