vue項目每30秒刷新1次接口的實現(xiàn)方法
在vue.js項目中,經(jīng)常需要對數(shù)據(jù)實時更新——每隔xx秒需要刷新一次接口——即需要用到定時器相關(guān)原理
我們先看一看2種常用定時器:
setInterval(function(){}, milliseconds)——會不停的調(diào)用函數(shù) setTimeout(function(){}, milliseconds)——只執(zhí)行函數(shù)一次
乍看之下,setInterval會符合我們的業(yè)務需求,然而也需要注意一些坑,單純的使用setInterval會導致頁面卡死!其原因與JS引擎線程有關(guān)(有興趣的童鞋可自行研究相關(guān)資料),用通俗話說就是setInterval不會清除定時器隊列,每重復執(zhí)行1次都會導致定時器疊加,最終卡死你的網(wǎng)頁。
但是setTimeout是自帶清除定時器的,因此正確解決方法如下:
window.setInterval(() => { setTimeout(fun, 0) }, 30000)
注意:setInterval必須放在外層(在內(nèi)層會導致頁面卡頓直到崩潰),內(nèi)層配合setTimeout,即可無限次調(diào)用我們的接口啦!
總結(jié)
以上所述是小編給大家介紹的vue項目每30秒刷新1次接口的實現(xiàn)方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
用v-html解決Vue.js渲染中html標簽不被解析的問題
這篇文章主要給大家介紹了如何利用v-html解決Vue.js渲染過程中html標簽不能被解析,html標簽顯示為字符串的問題,文中通過圖文介紹的很詳細,有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-12-12如何使用Vue3實現(xiàn)文章內(nèi)容中多個"關(guān)鍵詞"標記高亮顯示
高亮顯示是我們?nèi)粘i_發(fā)中經(jīng)常會遇到的需求,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3實現(xiàn)文章內(nèi)容中多個"關(guān)鍵詞"標記高亮顯示的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11vue動態(tài)生成新表單并且添加驗證校驗規(guī)則方式
這篇文章主要介紹了vue動態(tài)生成新表單并且添加驗證校驗規(guī)則方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10解決vue net :ERR_CONNECTION_REFUSED報錯問題
這篇文章主要介紹了解決vue net :ERR_CONNECTION_REFUSED報錯問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue-music關(guān)于Player播放器組件詳解
這篇文章主要為大家詳細介紹了vue-music關(guān)于Player播放器組件的相關(guān)資料,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11VUE中setTimeout和setInterval自動銷毀案例
這篇文章主要介紹了VUE中setTimeout和setInterval自動銷毀案例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09element自定義 多文件上傳 觸發(fā)多次on-change問題
這篇文章主要介紹了element自定義 多文件上傳 觸發(fā)多次on-change問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03