javascript - 倒数计时器脚本中跳过了很多秒

标签 javascript settimeout countdowntimer

我做了一个倒计时器。它使用日期函数来获取当前时间。然后它将该时间存储在另一个变量中。这个新变量会更改小时/分钟/秒,因此格式应与日期函数相同。

然后我将这两个变量转换为自计数以来的时间(以毫秒为单位)。 然后,我从新日期中减去当前日期,以获得两个变量的时间差(以毫秒为单位)。这应该是当前时间与目标时间的差异。

之后,我会将差异转换为可读的小时/分钟/秒时间格式,并将其显示在 div 中。还添加了一段允许闪烁倒数计时器的代码,如果计时器用完,将提供 5 分钟的额外时间。 (这个倒计时器应该是一个更大的脚本的一部分,做一些事情)

大问题是:计时器工作了。做我想做的一切。但它非常滞后!即使我将 setTimeout 设置为 10 毫秒,它也会跳过显示秒数。我还使用一个时钟,该时钟使用相同的计时器设置(不同的变量),并且该时钟不会跳过任何时间,setTimeout 为 1000 毫秒...

尝试使一些计算更小,甚至阅读了大量有关 javascript 中的 setTimeout 和 setInterval 漂移的内容,但这并不能解释我当前的问题。 (使用 setTimeout 进行聊天,每 500 毫秒重新加载消息,这就像一个魅力,所以我的计算机/客户端/服务器可以处理小于 1000 毫秒的时间)

IE 和 Firefox 上会发生跳秒现象。其他倒计时器(不执行我希望它们执行的操作)也在我的浏览器中运行良好。这是什么问题?!?

https://jsfiddle.net/77cnvq82/ 函数 startMyFunction() { setTimeout(myFunction, 100); }

在此示例中,速度已设置为 100ms

最佳答案

实际问题在于您的舍入和数学,而不是显示代码本身。

如果您将显示行更改为:

timerShowRemaining = timerShowRemaining+timerHours+":"+timerMinutes+":"+timerSeconds
 + (new Date());

它将显示当前时间,即使您计算的数字出现抖动和滞后,您也会看到秒数均匀计数。

关于javascript - 倒数计时器脚本中跳过了很多秒,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35376873/

相关文章:

android - ListView 和带倒数计时器的项目

javascript - 当通过 javascript 动态设置时,输入文本框的 ng-model 值在 angularjs Controller 中未定义

javascript - 查找等于 json 文件中某个值的元素

javascript - 每次添加标记时设置超时

javascript - componentDidMount() 中的 setTimeout() 不起作用

java - 如何修复 Android 应用程序中 CountDownTimer 的错误

迄今为止的 Javascript 时间戳

javascript - React.js 导入和使用组件

javascript - 为什么当我点击页面时 setTimeout/setInterval 速度变慢?

java - 倒计时器根本不工作