vue專案中實現定時重新整理頁面(重新渲染資料實時更新)
阿新 • • 發佈:2020-08-20
需求: 每隔一分鐘自動重新整理一下當前頁面,同時傳送請求,重新渲染資料,以到達實時更新。
開始:
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); })
本文感謝【大魚吃小魚7】的文章https://blog.csdn.net/qq_37210523/article/details/103121237