jquery倒计时时滞/跳跃

时间:2011-06-02 02:22:18

标签: jquery countdown

我有一个倒计时钟,我一直在努力。如果您观看它几秒钟,您将开始注意到它在计数时偶尔会挂起或跳跃一下。它的微妙但......显而易见。我们已经测试了很多浏览器和操作系统,问题似乎是一致的,我们只是不确定该怎么做。 Oringially我们有字体的图像精灵,但改变了认为我们有一些http请求泄漏但现在我们已经改变为cufon我们仍然看到相同的确切问题。

我们做的另一个更新是将间隔时间设置为500毫秒,但我们似乎仍然卡住了

http://dl.dropbox.com/u/2982102/Moto/Countdown/Cufon/markup-new/countdownclock/index.html

任何帮助都会很棒。

1 个答案:

答案 0 :(得分:0)

我的猜测是时钟的每个“滴答”过于密集而无法正确保持同步。为此,您需要每个'tick'执行的操作尽可能接近即时。

在倒计时运行时查看DOM会显示计数器使用每个'tick'更新的值重建DOM片段。这本身不会引起问题(我认为),但是将Cufon添加到混合中会增加很多开销 - Cufon需要重新索引新元素,读取它们的值并重新渲染字体。

可能有理由认为倒计时插件每次都会重建DOM,但乍一看,这似乎是一种效率低下的方法。

如果你真的需要花哨的字体,我会使用@ font-face解决方案,或者就像你说的那样,使用一组图像精灵。通过调整类来操作精灵图可以让你更新计数器而根本不触及DOM结构。但这需要构建您自己的插件版本。

<强>更新

我想我可能会有一些坏消息,伙计。我一直在修补一个不错的javascript计时器的基础,我想我已经遇到了你一直使用的时钟问题的根本原因。基本上,它归结为Javascript的计时功能不是很准确,原因有以下几点: 浏览器级别计时器的分辨率仅为10或15ms,具体取决于浏览器。 Javascript是单线程的,这意味着计时器事件进入队列,关闭时间。 我已经设置了一个基线测试,它可以确保一切正确“ - 保持所有需要按时运行的小而快,并且由于'tick'事件的排队而自动纠正时间的任何不准确性。基本上,每隔20ms检查一次,以找到更准确的点以更新显示。我的机器每次更新都需要1毫秒或更短时间(低于Javascript定时分辨率的限制)。

现在,90%的时间,这会产生一个时钟,它在准确的时间内20毫秒内更新,看起来很精确。问题是当浏览器决定做其他事情时 - 使用另一个选项卡或浏览器内部的东西。然后,我们确切地看到您已经注意到的滞后:显示器在更新之前可以挂起一秒钟或更长时间。自我纠正,下一次更新跳回到正确的时间,但它肯定是明显的,就像其他人一样。用户甚至不必做任何事情 - 我可以坐下来观看5(ms),5,8,10,5,1300,5,5,800的准确度读数跳跃...而根本不接触任何东西

所以,看起来我可能已经给你一个屁股转向 - 问题不是你的更新代码需要太长时间(虽然我们可以改进的效率低下),而是浏览器没有设置为准确的时间间隔准确的时间。在这个阶段,我没有看到有办法解决这个基本限制。

如果您有兴趣,请阅读以下内容:http://ejohn.org/blog/how-javascript-timers-work/http://old.nabble.com/Proposal%3A-High-resolution-%28and-otherwise-improved%29-timer-API-td19791635.html