拿一个简单的例子吧 就是获取验证码的倒计时 一般来说就是60秒
首先可能想到就是
setInterval
let count = 60
setInterval(() => {
count --;
}, 1000)
还有一种就是 setTImeout + 函数的递归调用
let count = 60
function coundown() {
count --;
if(count > 0) {
setTimeout(() => {
countdown()
}, 1000)
}
}
可能很容易忽视这玩意 觉得可能就是做动画用的
其实也可以用作倒计时的使用
下面举一个简单的例子
let rafId; // 标识动画的id
const endTime = Date.now() + 20 * 1000 // 加上20秒 // 结束时间
function step(timestamp) {
const diff = endTime - Date.now()
if(diff > 0) {
console.log(Math.floor(diff / 1000))
rafId = window.requestAnimationFrame(step)
}
}
window.requestAnimationFrame(step)
这东西 就是实现了简易版本的倒计时了 从实现上看 和 上面的两种其实差距不太大哈
但重点就是这玩意 可以暂停 能暂停
这里也可以吐槽下 那个Promise函数 这玩意有一点不好的就是 一旦运行必须给个结果 不能取消 中途不能取消
// 如果中途能取消的话 就很好了
window.cancelAnimationFrame(rafId)
当然实际效果 根据你自己想法来,想用啥 用啥 不用刻意去非得去用哪一个,能把任务搞定就行!