在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)
注意:setInterval必須放在外層(在內層會導致頁面卡頓直到崩潰),內層配合setTimeout,即可無限次調用我們的接口啦!
總結
以上所述是小編給大家介紹的vue項目每30秒刷新1次接口的實現方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對神馬文庫網站的支持!