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

【相關(guān)文章推薦：vue.js】

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

js有兩種定時器

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

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

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

但是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.在執(zhí)行定時器前先執(zhí)行一次獲取接口數(shù)據(jù)的操作函數(shù), 否則接口會1分鐘后才調(diào)用

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

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

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

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

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

優(yōu)化方案:

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

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

相關(guān)免費學(xué)習(xí)推薦：javascript（視頻）