拿一個簡單的例子吧 就是獲取驗證碼的倒計時 一般來說就是60秒

首先可能想到就是

setInterval
let count = 60
setInterval(() => {
?? ?count --;
}, 1000)

還有一種就是 setTImeout + 函數(shù)的遞歸調用
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)
? ? ??


這東西 就是實現(xiàn)了簡易版本的倒計時了 從實現(xiàn)上看 和 上面的兩種其實差距不太大哈

但重點就是這玩意 可以暫停 能暫停
這里也可以吐槽下 那個Promise函數(shù) 這玩意有一點不好的就是 一旦運行必須給個結果 不能取消 中途不能取消

// 如果中途能取消的話 就很好了

window.cancelAnimationFrame(rafId)

當然實際效果 根據(jù)你自己想法來，想用啥 用啥 不用刻意去非得去用哪一個，能把任務搞定就行！
?