互金中的前端倒计时组件

4 阅读1分钟

1.先问一下,导致问题前端定时器的误差具体原因是什么?

  • setTimeout和setInterval定时器中时间间隔是针对什么设置的时间?(实际执行时间)
  • 事件循环对他的影响
  • PC端标签页的“节能”
  • “电脑休眠”导致定时器暂停计时

问题1: 当接口返回的是剩余时间 还是 截止时间 应该怎么处理

首先,setInterval中设置的 time 时间是指,callback回调函数作为“主任务”放入“事件循环队列”中的时间间隔。

setTimeout中第二个时间参数的定义是:callback回调函数在多少秒后放入“任务队列”。

那么这两个定时器- API设置倒计时时间不准确的原因在于:第二个时间参数是放入任务队列的时间,而不是回调执行的时间。也就是说将任务放入队列中不一定立即执行,还取决于两个方面:

  1. 放入任务队列之后,是否可以立即执行,取决于当前任务队列正在执行的js代码耗时;
  2. 如果是setInterval循环放置的话,还受到定时器本身的回调任务执行所需要的耗时。如果回调执行耗时2s,那么第1秒放入队列中, 任务执行2s,过了1s到了第3s刚好到下一个间隔时间3s,此时下一个任务立即执行。也就是说任务和任务之间的执行间隔不是3s,变成了1s。这就是setInterval的“实际调用间隔误差

1.1 JavaScript的“单线程陷阱”

1.2 浏览器的“节能模式”

1.3 设备时间的“人为干扰”