微信開發之小程式實現倒數計時

setTimeout(func, time)可以使得每隔time毫秒就執行一次func函式，常用來做計時器/時鐘。

下面是在微信小程式中的使用思路，只擷取了關鍵部分程式碼。

var timer; // 計時器

Page({
  // ...省略
  
  // 自定義的開始按鈕
  startBtn: function () {
    console.log("開始按鈕");
    Countdown();
  },

　　// 自定義的暫停按鈕  
  pauseBtn: function () { 
    console.log("暫停按鈕");
    clearTimeout(timer);
  },
});

// 倒數計時
function Countdown() {
  timer = setTimeout(function () {
    console.log("----Countdown----");
    Countdown();
  }, 1000);
};

思路：

• setTimeout()延遲指定毫秒數後執行指定函式，可通過遞迴呼叫setTimeout()來實現各種計時器功能。
• 如果想做每秒鐘重新整理一次的時鐘，只需每次執行時間轉換函式並setData更新介面即可。
• 使用clearTimeout("定時器的名字")可以停下指定的計時器。

下面是Javascript關於時間的轉換函式。

// 秒數 --> 時：分：秒
function formatTime(seconds) {
    return [
        parseInt(seconds / 60 / 60), // 時
        parseInt(seconds / 60 % 60), // 分
        parseInt(seconds % 60)       // 秒
    ]
        .join(":")
        .replace(/\b(\d)\b/g, "0$1");
}

另外，做定時重複呼叫函式的功能時，用setTimeOut()代替setInterval()，因為setInterval()是有誤差的！詳情參考

參考資料：

• https://www.w3cschool.cn/xiaochengxu/nsgq1u7h.html