js 中倒计时的纠偏实现?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

js 中倒计时的纠偏实现?

剑曼红尘 2020-04-08 12:39:37 178

js 中倒计时的纠偏实现?

JavaScript
分享到
取消 提交回答
全部回答(1)
  • 剑曼红尘
    2020-04-08 12:39:44

    在前端实现中我们一般通过 setTimeout 和 setInterval 方法来实现一个倒计时效果。但是使用这些方法会存在时间偏差的问题,这是由于 js 的程序执行机制造成的,setTimeout 和 setInterval 的作用是隔一段时间将回调事件加入到事件队列中,因此事件并不是立即执行的,它会等到当前执行栈为空的时候再取出事件执行,因此事件等待执行的时间就是造成误差的原因。

    一般解决倒计时中的误差的有这样两种办法:

    (1)第一种是通过前端定时向服务器发送请求获取最新的时间差,以此来校准倒计时时间。

    (2)第二种方法是前端根据偏差时间来自动调整间隔时间的方式来实现的。这一种方式首先是以 setTimeout 递归的方式来实现倒计时,然后通过一个变量来记录已经倒计时的秒数。每一次函数调用的时候,首先将变量加一,然后根据这个变量和每次的间隔时间,我们就可以计算出此时无偏差时应该显示的时间。然后将当前的真实时间与这个时间相减,这样我们就可以得到时间的偏差大小,因此我们在设置下一个定时器的间隔大小的时候,我们就从间隔时间中减去这个偏差大小,以此来实现由于程序执行所造成的时间误差的纠正。

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程