微信小程序—setTimeOut定時(shí)器的問題及解決
背景
實(shí)驗(yàn)室需要將項(xiàng)目的app搬到微信的小程序上,終于知道為什么程序員是手藝人了,只要有需求,就要想方設(shè)法去填充這種需求,去年是小程序的元年了可以說,去年冬天一個(gè)叫跳一跳的小程序游戲出現(xiàn)在我的微信中,當(dāng)時(shí)就覺得騰訊是真的牛皮。一時(shí)間很多的軟件小程序版相繼出現(xiàn),各大微信公眾號(hào)也開始關(guān)聯(lián)小程序。小程序相比于app,有著獨(dú)特的優(yōu)勢(shì),其中最大的就是沒有ios和android平臺(tái)之分,但是同時(shí)也有局限,你給我開發(fā)個(gè)小程序王者榮耀試試。
定時(shí)任務(wù)
微信小程序API中有兩種定時(shí)任務(wù)
- setInterval
- setTimeOut
這兩者都能實(shí)現(xiàn)定時(shí)任務(wù),比如實(shí)現(xiàn)一個(gè)定時(shí)器,但是建議采用后者setTimeOut,理由是前者并不精確。詳細(xì)請(qǐng)參考
https://www.zhihu.com/question/20479535
setTimeOut用法
不多說直接上:
var timerName = setTimeOut(function() { //循環(huán)代碼 }, delay)
這里在循環(huán)代碼處做我們需要循環(huán)處理的邏輯,delay是延遲的毫秒數(shù),5秒 = 5 * 1000,timerName是返回的定時(shí)器名稱,有什么用,因?yàn)橐∠@個(gè)定時(shí)器就需要給需要給出取消的定時(shí)器名稱
clearTimeOut(timerName)
坑
我有一個(gè)需求是每五秒獲取一次位置
startReportHeart() { var timerTem = setTimeout(function () { that.heartReport(); }, app.globalConfig.heart_delay) // 保存定時(shí)器name that.setData({ timer: timerTem }) },
heartReport()就是獲取位置信息,這樣的效果是,只執(zhí)行了一次。然后查看了一通資料,發(fā)現(xiàn)這個(gè)setTimeOut只是在delay毫秒之后執(zhí)行代碼,嗦嘎。
那如何才能循環(huán)執(zhí)行呢?——>遞歸登場(chǎng)
好吧,我的遞歸就是(錯(cuò)誤代碼)
startReportHeart() { var timerTem = setTimeout(function () { that.heartReport(); }, app.globalConfig.heart_delay) // 保存定時(shí)器name that.setData({ timer: timerTem }) }) that.startReportHeart() },
好像沒有毛病啊,自遞歸調(diào)用,嗯,沒毛病,但是,,,,情況就是,瞬間出現(xiàn)了堆棧溢出。哈哈哈哈哈哈哈。。。。。。。
分析:
我在startReportHeart函數(shù)中開啟了一個(gè)timer,5秒后開始執(zhí)行,heartReport獲取位置信息,此時(shí)直接遞歸調(diào)用自己,再開啟一個(gè)timer,我的天,這么愚蠢的代碼,是誰寫的,沒錯(cuò)就是我。手動(dòng)捂臉。
在知道了原因之后,那么如何才能解決呢?我們需要5秒后在一次執(zhí)行,對(duì)就是這個(gè)需求,那么自然就是在timer中調(diào)用自身啊。笨蛋。
正確代碼:
startReportHeart() { var timerTem = setTimeout(function () { that.heartReport(); that.startReportHeart() }, app.globalConfig.heart_delay) // 保存定時(shí)器name that.setData({ timer: timerTem }) },
就這樣完美。
總結(jié)
有的時(shí)候,遇到的坑真的很想打自己一巴掌,但是解決坑的過程,并發(fā)現(xiàn)自己的愚蠢卻是一件非常開心的事呢。這個(gè)過程也是十分的funning呢。
小程序開發(fā)剛開始一周時(shí)間,是的,一周上手,一點(diǎn)一點(diǎn),現(xiàn)在越來越順手,雖然寫的東西比較low,但是再一次印證了那句話,只有實(shí)踐才是最好的學(xué)習(xí)方式。不要找什么從入門到精通,你會(huì)發(fā)現(xiàn),這些都會(huì)讓你從入門到放棄。
,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值
相關(guān)文章
JS實(shí)現(xiàn)日期時(shí)間動(dòng)態(tài)顯示的方法
這篇文章主要介紹了JS實(shí)現(xiàn)日期時(shí)間動(dòng)態(tài)顯示的方法,涉及JavaScript基于時(shí)間函數(shù)定時(shí)操作頁面元素屬性的相關(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-12-12Javascript類型系統(tǒng)之String字符串類型詳解
這篇文章主要介紹了Javascript類型系統(tǒng)之String字符串類型詳解的相關(guān)資料,需要的朋友可以參考下2016-06-06JavaScript 全面解析各種瀏覽器網(wǎng)頁中的JS 執(zhí)行順序
近來我通過一些測(cè)試以全面的解析網(wǎng)頁在各種瀏覽器中的JavaScript代碼的執(zhí)行順序,在這兒做個(gè)記錄。2009-02-02JavaScript/jQuery實(shí)現(xiàn)切換頁面效果
這篇文章主要為大家詳細(xì)介紹了JavaScript或jQuery實(shí)現(xiàn)切換頁面效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03Swiper實(shí)現(xiàn)導(dǎo)航欄滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了Swiper實(shí)現(xiàn)導(dǎo)航欄滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10javascript實(shí)現(xiàn)的動(dòng)態(tài)文字變換
javascript實(shí)現(xiàn)的動(dòng)態(tài)文字變換...2007-07-07js實(shí)現(xiàn)身份證號(hào)碼驗(yàn)證的簡單實(shí)例
本篇文章主要是對(duì)js實(shí)現(xiàn)身份證號(hào)碼驗(yàn)證的簡單實(shí)例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02