js中使用requestAnimationFrame 实现倒计时功能(简单秒数倒计时例子)， 这个好像比想象中的更好用 |
您所在的位置：网站首页 › vue实现倒计时60秒用到的技术 › js中使用requestAnimationFrame 实现倒计时功能(简单秒数倒计时例子)， 这个好像比想象中的更好用 |
|
对前端同学来说，可能经常要做到倒计时的功能，特别是一些电商的网站。 或者做一些搞活动的页面，倒计时开始。 就拿一个简单的例子吧 就是获取验证码的倒计时 一般来说就是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)当然实际效果 根据你自己想法来，想用啥 用啥 不用刻意去非得去用哪一个，能把任务搞定就行！ 关注我 持续更新前端知识 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |