使用requestAnimationFrame 实现倒计时功能js(简单秒数倒计时)

拿一个简单的例子吧 就是获取验证码的倒计时 一般来说就是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)

当然实际效果 根据你自己想法来，想用啥 用啥 不用刻意去非得去用哪一个，能把任务搞定就行！