微信小程序—setTimeout定時器的坑

背景

實驗室需要將項目的app搬到微信的小程序上，終於知道為什么程序員是手藝人了，只要有需求，就要想方設法去填充這種需求，去年是小程序的元年了可以說，去年冬天一個叫跳一跳的小程序游戲出現在我的微信中，當時就覺得騰訊是真的牛皮。一時間很多的軟件小程序版相繼出現，各大微信公眾號也開始關聯小程序。小程序相比於app，有着獨特的優勢，其中最大的就是沒有ios和android平台之分，但是同時也有局限，你給我開發個小程序王者榮耀試試。

定時任務

微信小程序API中有兩種定時任務

• setInterval
• setTimeout
  這兩者都能實現定時任務，比如實現一個定時器，但是建議采用后者setTimeout,理由是前者並不精確。詳細請參考https://www.zhihu.com/question/20479535

setTimeout用法

不多說直接上：

var timerName = setTimeout(function() {
	//循環代碼
}, delay)

這里在循環代碼處做我們需要循環處理的邏輯，delay是延遲的毫秒數，5秒 = 5 * 1000，timerName是返回的定時器名稱，有什么用，因為要取消這個定時器就需要給需要給出取消的定時器名稱

clearTimeout(timerName)

坑

我有一個需求是每五秒獲取一次位置

startReportHeart() {
     var timerTem = setTimeout(function () {
         that.heartReport();
     }, app.globalConfig.heart_delay)
     // 保存定時器name
     that.setData({
         timer: timerTem
     })
 },

heartReport()就是獲取位置信息，這樣的效果是，只執行了一次。然后查看了一通資料，發現這個setTimeout只是在delay毫秒之后執行代碼，嗦嘎。
那如何才能循環執行呢？——>遞歸登場
好吧，我的遞歸就是(錯誤代碼)

startReportHeart() {
     var timerTem = setTimeout(function () {
         that.heartReport();
     }, app.globalConfig.heart_delay)
     // 保存定時器name
        that.setData({
            timer: timerTem
     })
     })
     that.startReportHeart()
 },

好像沒有毛病啊，自遞歸調用，嗯，沒毛病，但是，，，，情況就是，瞬間出現了堆棧溢出。哈哈哈哈哈哈哈。。。。。。。
分析:

• 我在startReportHeart函數中開啟了一個timer，5秒后開始執行，heartReport獲取位置信息，此時直接遞歸調用自己，再開啟一個timer，我的天，這么愚蠢的代碼，是誰寫的，沒錯就是我。手動捂臉。

在知道了原因之后，那么如何才能解決呢？我們需要5秒后在一次執行，對就是這個需求，那么自然就是在timer中調用自身啊。笨蛋。

正確代碼:

startReportHeart() {
     var timerTem = setTimeout(function () {
         that.heartReport();
         that.startReportHeart()
     }, app.globalConfig.heart_delay)
     // 保存定時器name
      that.setData({
            timer: timerTem
     })
 },

就這樣完美。

總結

有的時候，遇到的坑真的很想打自己一巴掌，但是解決坑的過程，並發現自己的愚蠢卻是一件非常開心的事呢。這個過程也是十分的funning呢。
小程序開發剛開始一周時間，是的，一周上手，一點一點，現在越來越順手，雖然寫的東西比較low，但是再一次印證了那句話，只有實踐才是最好的學習方式。不要找什么從入門到精通，你會發現，這些都會讓你從入門到放棄。

---

最后

• 本文內容個人拙見，若有出入，歡迎指正。
• 歡迎賞臉關注：家佳Talk