在vue.js項目中，經常需要對數據實時更新——每隔xx秒需要刷新一次介面——即需要用到定時器相關原理。這篇文章主要介紹了vue項目每30秒刷新1次介面的實現方法，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。 在vue.js項目中，經常需要對數據實時更新——每隔x ...
在vue.js項目中，經常需要對數據實時更新——每隔xx秒需要刷新一次介面——即需要用到定時器相關原理。這篇文章主要介紹了vue項目每30秒刷新1次介面的實現方法，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。
在vue.js項目中，經常需要對數據實時更新——每隔xx秒需要刷新一次介面——即需要用到定時器相關原理
我們先看一看2種常用定時器：
setInterval(function(){}, milliseconds)——會不停的調用函數
setTimeout(function(){}, milliseconds)——只執行函數一次
setInterval會符合我們的業務需求，然而也需要註意一些坑，單純的使用setInterval會導致頁面卡死！其原因與JS引擎線程有關（有興趣的童鞋可自行研究相關資料），用通俗話說就是setInterval不會清除定時器隊列，每重覆執行1次都會導致定時器疊加，最終卡死你的網頁。
但是setTimeout是自帶清除定時器的，因此正確解決方法如下：
window.setInterval(() => {
setTimeout(fun, 0)
}, 30000)//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流：864305860
註意：setInterval必須放在外層（在內層會導致頁面卡頓直到崩潰），內層配合setTimeout，即可無限次調用我們的介面啦！
結語
感謝您的觀看，如有不足之處，歡迎批評指正。
