问题:

开发倒计时组件时候,一开始使用 setInterval 来实现,出现倒计时卡对,不准确,每隔三秒倒计时等问题。

原因:

查看:https://weread.qq.com/web/reader/eb232f50718ff5e9eb2a999 有详细说明。
定时器执行时候,是将要执行的代码添加到一个队列。定时器对队列的工作方式是,当特定时间过去后将代码插入。注意,给队列添加代码并不意味着对它立刻执行,而只能表示它会尽快执行。
关于定时器要记住的最重要的事情是,指定的时间间隔表示何时将定时器的代码添加到队列,而不是何时实际执行代码。

setInterval 特点:

  1. 使用setInterval()创建的定时器确保了定时器代码规则地插入队列中。这样会导致定时器代码可能在代码再次被添加到队列之前还没有完成执行,结果导致定时器代码连续运行好几次,而之间没有任何停顿。
  2. JavaScript引擎够为了避免这个问题。当使用setInterval()时,仅当没有该定时器的任何其他代码实例时,才将定时器代码添加到队列中。这确保了定时器代码加入到队列中的最小时间间隔为指定间隔。

带来的问题:
(1) 某些间隔会被跳过;
(2) 多个定时器的代码执行之间的间隔可能会比预期的小。

解决方法:

使用 setTimeout 来实现。
这是因为 ,在前一个定时器代码执行完之前,不会向队列插入新的定时器代码,确保不会有任何缺失的间隔。它可以保证在下一次定时器代码执行之前,至少要等待指定的间隔,避免了连续的运行。