拿一個簡單的例子吧 就是獲取驗(yàn)證碼的倒計(jì)時 一般來說就是60秒

首先可能想到就是

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

還有一種就是 setTImeout + 函數(shù)的遞歸調(diào)用
let count = 60
function coundown() {
?? ?count --;
?? ?if(count > 0) {
?? ??? ?setTimeout(() => {
?? ??? ??? ?countdown()
?? ??? ?}, 1000)
?? ?}
}

可能很容易忽視這玩意 覺得可能就是做動畫用的

其實(shí)也可以用作倒計(jì)時的使用

下面舉一個簡單的例子

let rafId; // 標(biāo)識動畫的id
?const endTime = Date.now() + 20 * 1000 // 加上20秒 ?// 結(jié)束時間
? ? ? ? function step(timestamp) {
? ? ? ? ? ? const diff = endTime - Date.now()
? ? ? ? ? ? if(diff > 0) {
? ? ? ? ? ? ? ? console.log(Math.floor(diff / 1000))
? ? ? ? ? ? ? ? rafId = window.requestAnimationFrame(step)
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? window.requestAnimationFrame(step)
? ? ??


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

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

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

window.cancelAnimationFrame(rafId)

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