vue項(xiàng)目如何做到每30秒刷新1次接口？

honmaple 發(fā)布于2019-08-23 13:52 / 2988人閱讀

摘要：但是是自帶清除定時(shí)器的，因此正確解決方法如下注意必須放在外層在內(nèi)層會(huì)導(dǎo)致頁(yè)面卡頓直到崩潰，內(nèi)層配合，即可無(wú)限次調(diào)用我們的接口啦

歡迎關(guān)注前端小謳的github，閱讀更多原創(chuàng)技術(shù)文章

在vue.js項(xiàng)目中，經(jīng)常需要對(duì)數(shù)據(jù)實(shí)時(shí)更新——每隔xx秒需要刷新一次接口——即需要用到定時(shí)器相關(guān)原理

我們先看一看2種常用定時(shí)器：

setInterval(function(){}, milliseconds)——會(huì)不停的調(diào)用函數(shù)

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

乍看之下，setInterval會(huì)符合我們的業(yè)務(wù)需求，然而也需要注意一些坑，單純的使用setInterval會(huì)導(dǎo)致頁(yè)面卡死！其原因與JS引擎線程有關(guān)（有興趣的童鞋可自行研究相關(guān)資料），用通俗話說(shuō)就是setInterval不會(huì)清除定時(shí)器隊(duì)列，每重復(fù)執(zhí)行1次都會(huì)導(dǎo)致定時(shí)器疊加，最終卡死你的網(wǎng)頁(yè)。

但是setTimeout是自帶清除定時(shí)器的，因此正確解決方法如下：

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

注意：setInterval必須放在外層（在內(nèi)層會(huì)導(dǎo)致頁(yè)面卡頓直到崩潰），內(nèi)層配合setTimeout，即可無(wú)限次調(diào)用我們的接口啦！

GPU云服務(wù)器云服務(wù)器 js每間隔1秒每隔5秒請(qǐng)求一次數(shù)據(jù) 云服務(wù)器開(kāi)機(jī)要開(kāi)30秒 html 3秒刷新

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/99695.html

相關(guān)文章

加推Weex實(shí)踐之路（上）

摘要：我們參考小程序的設(shè)計(jì)思路進(jìn)行了優(yōu)化升級(jí)，為每一個(gè)需要特有化配置的頁(yè)面添加一個(gè)格式的配置文件，配置文件包括導(dǎo)航欄的配置頁(yè)面級(jí)別的配置跳轉(zhuǎn)的配置等，將配置工程化標(biāo)準(zhǔn)化。設(shè)置導(dǎo)航欄按鈕包含按鈕樣式的數(shù)組通過(guò)完成按鈕事件的回調(diào)。一、背景1.為什么是Weex在公司快速發(fā)展的大環(huán)境下，App的更新迭代高速、高頻，技術(shù)團(tuán)隊(duì)平均兩周便可誕生一款中型App，但App團(tuán)隊(duì)只有6個(gè)人（iOS 、Android各3...

shuibo 2019-05-22 19:43 評(píng)論0 收藏0
頁(yè)面性能優(yōu)化實(shí)踐總結(jié)

摘要：頁(yè)面性能優(yōu)化學(xué)而不思則惘，思而不學(xué)則殆前幾天接到一個(gè)頁(yè)面效果優(yōu)化的任務(wù)，邊做邊查閱了一些關(guān)于頁(yè)面性能的資料。可能只需要在中使用這類屬性，即可開(kāi)啟硬件加速硬件加速真的那么好嗎從本人在移動(dòng)端開(kāi)發(fā)的實(shí)踐來(lái)看，硬件加速是比較坑的。頁(yè)面性能優(yōu)化學(xué)而不思則惘，思而不學(xué)則殆前幾天接到一個(gè)頁(yè)面效果優(yōu)化的任務(wù)，邊做邊查閱了一些關(guān)于頁(yè)面性能的資料。做完任務(wù)之后，抽空寫(xiě)了一篇總結(jié)，梳理一下思路，加深自...

LiangJ 2019-08-29 11:01 評(píng)論0 收藏0
頁(yè)面性能優(yōu)化實(shí)踐總結(jié)

摘要：頁(yè)面性能優(yōu)化學(xué)而不思則惘，思而不學(xué)則殆前幾天接到一個(gè)頁(yè)面效果優(yōu)化的任務(wù)，邊做邊查閱了一些關(guān)于頁(yè)面性能的資料。可能只需要在中使用這類屬性，即可開(kāi)啟硬件加速硬件加速真的那么好嗎從本人在移動(dòng)端開(kāi)發(fā)的實(shí)踐來(lái)看，硬件加速是比較坑的。頁(yè)面性能優(yōu)化學(xué)而不思則惘，思而不學(xué)則殆前幾天接到一個(gè)頁(yè)面效果優(yōu)化的任務(wù)，邊做邊查閱了一些關(guān)于頁(yè)面性能的資料。做完任務(wù)之后，抽空寫(xiě)了一篇總結(jié)，梳理一下思路，加深自...

caoym 2019-08-19 18:48 評(píng)論0 收藏0
一次網(wǎng)站的性能優(yōu)化之路 -- 天下武功，唯快不破

摘要：百度搜索資源平臺(tái)有閃電算法的支持，為了能夠保障用戶體驗(yàn)，給予優(yōu)秀站點(diǎn)更多面向用戶的機(jī)會(huì)，閃電算法在年月初上線。下欄是每一個(gè)指標(biāo)的細(xì)化性能評(píng)估。最后優(yōu)化之路漫漫，永無(wú)止境，天下武功，唯快不破。 showImg(https://segmentfault.com/img/remote/1460000018537491); 首屏作為直面用戶的第一屏，其重要性不言而喻，如何加快加載的速度是非常重...

mudiyouyou 2019-08-23 16:01 評(píng)論0 收藏0