uniapp中使用計(jì)時(shí)器setInterval的場(chǎng)景與方法
首先要區(qū)分setInterval和setTimeout
使用場(chǎng)景:
1.一般情況下 setTimeout() 用于延遲執(zhí)行某方法或功能;
2.setInterval() 則一般用于刷新表單,對(duì)于一些表單的假實(shí)時(shí)指定時(shí)間刷新同步。
定義:
1.setInterval() : 用于按照指定的周期(以毫秒計(jì))來(lái)循環(huán)調(diào)用函數(shù)或計(jì)算表達(dá)式,直到 clearInterval() 被調(diào)用或窗口關(guān)閉
2.setTimeout(): 用于在指定毫秒數(shù)后再調(diào)用函數(shù)或者計(jì)算表達(dá)式(以毫秒為單位)
區(qū)別總結(jié):
setTimeout() 方法只運(yùn)行一次,也就是說(shuō)當(dāng)達(dá)到設(shè)定的時(shí)間后就開(kāi)始運(yùn)行指定的代碼,運(yùn)行完后就結(jié)束了,次數(shù)是一次。
setInterval() 是循環(huán)執(zhí)行的,即每達(dá)到指定的時(shí)間間隔就執(zhí)行相應(yīng)的函數(shù)或者表達(dá)式,只要窗口不關(guān)閉或 clearInterval() 調(diào)用就會(huì)無(wú)限循環(huán)下去。
缺點(diǎn)總結(jié):
setInterval缺點(diǎn):
1.使用setInterval時(shí),某些間隔會(huì)被跳過(guò);即使setInterval調(diào)用的方法報(bào)錯(cuò)了,他仍然會(huì)繼續(xù)執(zhí)行。
2.無(wú)視網(wǎng)絡(luò)延遲,可能多個(gè)定時(shí)器會(huì)連續(xù)執(zhí)行
setTimeout缺點(diǎn):
1.不能按時(shí)執(zhí)行
2.執(zhí)行動(dòng)畫(huà)時(shí)它通過(guò)設(shè)定間隔時(shí)間來(lái)不斷改變圖像位置,達(dá)到動(dòng)畫(huà)效果。但是容易出現(xiàn)卡頓、抖動(dòng)的現(xiàn)象,原因是: settimeout 任務(wù)被放入異步隊(duì)列,只有當(dāng)主線(xiàn)程任務(wù)執(zhí)行完后才會(huì)執(zhí)行隊(duì)列中的任務(wù)。
uniapp上使用:
//uniapp中的具體用法:我這里使用到了setInterval data() { return { timer: null//定時(shí)器名稱(chēng) }; }, //一般在頁(yè)面需要的地方使用,這里我是放在了onshow()里 onShow() { // console.log('onshow'); this.timer = setInterval(function() { // 放入你自己的業(yè)務(wù)邏輯代碼 }, 3000); }, //uniapp中onHide()能監(jiān)聽(tīng)到頁(yè)面離開(kāi) onHide() {//離開(kāi)頁(yè)面前清除計(jì)時(shí)器 // console.log('onHide'); clearInterval(this.timer); this.timer = null; },
這里我要說(shuō)明一下,在uniapp 中要實(shí)現(xiàn)vue離開(kāi)頁(yè)面銷(xiāo)毀定時(shí)器功能,百度了一大圈都說(shuō)使用vue的beforeDestroy生命周期,如下:
//beforeDestroy為實(shí)例銷(xiāo)毀之前調(diào)用 beforeDestroy() { if(this.timer) { clearInterval(this.timer); //關(guān)閉 }
結(jié)果,根本就沒(méi)有用,依然關(guān)不掉,最后看到一個(gè)方法說(shuō)是:通過(guò)$once這個(gè)事件偵聽(tīng)器器在定義完定時(shí)器之后的位置來(lái)清除定時(shí)器,如下:
const timer = setInterval(() =>{ // 某些定時(shí)器操作 }, 500); // 通過(guò)$once來(lái)監(jiān)聽(tīng)定時(shí)器,在beforeDestroy鉤子可以被清除。 uni.$once('beforeDestroy', () => { clearInterval(timer); })
顯然,對(duì)我這里并沒(méi)有用,最后還是采用了 onHide()這個(gè)頁(yè)面生命周期才能及時(shí)清除
補(bǔ)充:uni-app 倒計(jì)時(shí)計(jì)時(shí)器
<text class="red">剩余時(shí)間:<text>{{remaining}}</text></text>
export default { data() { return { remaining: '', //顯示剩余時(shí)間 remainingd: '' //數(shù)據(jù)返回時(shí)間秒 } }, onLoad() { uni.showLoading(); //數(shù)據(jù)加載中 this.getmsglist();//第一次加載數(shù)據(jù) }, methods: { //獲取列表信息 getmsglist: function() { var _self = this; _self.goodsid = uni.getStorageSync('goodsid'); uni.request({ url: _self._apiurl + "/app/goods/getgoodsdetail", method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded' }, data: { openid: _self.openid, token: _self.token, }, success: (res) => { console.log(res); var data = res.data; _self.remainingd = data.data.timestamp; _self.jishiqi();//執(zhí)行一次倒計(jì)時(shí),因?yàn)檫M(jìn)入頁(yè)面有等待 setInterval(function() { _self.jishiqi(); }, 1000) uni.hideLoading(); //關(guān)閉加載 } }) }, //倒計(jì)時(shí)計(jì)時(shí)器 jishiqi: function() { var dj = this.remainingd; if (dj <= 0) { this.remaining = "已過(guò)期"; } else { var ddf = this.djs(dj); //格式化過(guò)后的時(shí)間 this.remaining = ddf; //當(dāng)前時(shí)間減去時(shí)間 dj = dj - 1; this.remainingd = dj; } }, //得到的秒換算成時(shí)分秒 djs: function(ms) { var h = parseInt(ms / (60 * 60)); var m = parseInt((ms % (60 * 60)) / 60); var s = (ms % (60 * 60)) % 60; return h + ":" + m + ":" + s; }, } }
總結(jié)
到此這篇關(guān)于uniapp中使用計(jì)時(shí)器setInterval的文章就介紹到這了,更多相關(guān)uniapp使用計(jì)時(shí)器setInterval內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
僅Firefox中鏈接A無(wú)法實(shí)現(xiàn)模擬點(diǎn)擊以觸發(fā)其默認(rèn)行為
偶然發(fā)現(xiàn)之前寫(xiě)的事件模塊在Firefox5中無(wú)法觸發(fā)A的默認(rèn)行為了。IE/Opera/Firefox5中A具有click方法,因此模擬點(diǎn)擊直接調(diào)用click方法即可。2011-07-07VSCode中如何利用d.ts文件進(jìn)行js智能提示
這篇文章主要給大家介紹了關(guān)于VSCode中如何利用d.ts文件進(jìn)行js智能提示的相關(guān)資料,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2018-04-04JavaScript實(shí)現(xiàn)控制打開(kāi)文件另存為對(duì)話(huà)框的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)控制打開(kāi)文件另存為對(duì)話(huà)框的方法,實(shí)例分析了javascript實(shí)現(xiàn)文件另存為的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04利用Math.js解決JS計(jì)算小數(shù)精度丟失問(wèn)題
電商系統(tǒng)中訂單、庫(kù)存中有數(shù)字等加減乘除算術(shù),下面這篇文章主要給大家介紹了關(guān)于利用Math.js解決JS計(jì)算小數(shù)精度丟失問(wèn)題的相關(guān)資料,mathjs是一個(gè)前端在計(jì)算上面必定會(huì)用到的類(lèi)庫(kù),需要的朋友可以參考下2022-04-04完美解決spring websocket自動(dòng)斷開(kāi)連接再創(chuàng)建引發(fā)的問(wèn)題
下面小編就為大家?guī)?lái)一篇完美解決spring websocket自動(dòng)斷開(kāi)連接再創(chuàng)建引發(fā)的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03JavaScript輕松創(chuàng)建級(jí)聯(lián)函數(shù)的方法示例
級(jí)聯(lián)函數(shù)也叫鏈?zhǔn)胶瘮?shù),方法鏈一般適合對(duì)一個(gè)對(duì)象進(jìn)行連續(xù)操作 (集中在一句代碼)。一定程度上可以減少代碼量,缺點(diǎn)是它占用了 函數(shù)的返回值。下面這篇文章主要給大家介紹了利用JavaScript如何輕松創(chuàng)建級(jí)聯(lián)函數(shù)的方法示例,需要的朋友可以參考借鑒。2017-02-02js仿QQ中對(duì)聯(lián)系人向左滑動(dòng)、滑出刪除按鈕的操作
這篇文章主要介紹了js仿QQ中對(duì)聯(lián)系人向左滑動(dòng)、滑出刪除按鈕的操作,即編寫(xiě)一個(gè)js向左滑動(dòng)刪除 交互特效的插件,感興趣的小伙伴們可以參考一下2016-04-04