【微信小程序】使用setTimeout制作定时器的思路

时间:2021-08-15 18:31:35

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();
}, );
};

思路:

  • setTimeout()延迟指定毫秒数后执行指定函数,可通过递归调用setTimeout()来实现各种计时器功能。
  • 如果想做每秒钟刷新一次的时钟,只需每次执行时间转换函数并setData更新界面即可。
  • 使用clearTimeout("定时器的名字")可以停下指定的计时器。

下面是Javascript关于时间的转换函数。

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

另外,做定时重复调用函数的功能时,用setTimeOut()代替setInterval(),因为setInterval()是有误差的!详情参考

参考资料: