vue項目如何作到每30秒刷新1次接口？

歡迎關注前端小謳的github，閱讀更多原創技術文章

在vue.js項目中，常常須要對數據實時更新——每隔xx秒須要刷新一次接口——即須要用到定時器相關原理

咱們先看一看2種經常使用定時器：

setInterval(function(){}, milliseconds)——會不停的調用函數

setTimeout(function(){}, milliseconds)——只執行函數一次

乍看之下，setInterval會符合咱們的業務需求，然而也須要注意一些坑，單純的使用setInterval會致使頁面卡死！其緣由與JS引擎線程有關（有興趣的童鞋可自行研究相關資料），用通俗話說就是setInterval不會清除定時器隊列，每重複執行1次都會致使定時器疊加，最終卡死你的網頁。

可是setTimeout是自帶清除定時器的，所以正確解決方法以下：

window.setInterval(() => {
    setTimeout(fun, 0)
}, 30000)

注意：setInterval必須放在外層（在內層會致使頁面卡頓直到崩潰），內層配合setTimeout，便可無限次調用咱們的接口啦！