在html5移动应用中使用JavaScript Countdown计时器

Question

我需要在我的html5（sencha touch 2）移动应用程序中实现倒数计时器。

目前，我使用了一个JavaScript函数，它通过setInterval函数每秒更新一次计时器，然后更新html内容。

function updateTimer() {
now      = new Date();
kickoff  = Date.parse("August 15, 2013 09:00:00");
diff = kickoff - now;

days  = Math.floor( diff / (1000*60*60*24) );
hours = Math.floor( diff / (1000*60*60) );
mins  = Math.floor( diff / (1000*60) );
secs  = Math.floor( diff / 1000 );

dd = days;
hh = hours - days  * 24;
mm = mins  - hours * 60;
ss = secs  - mins  * 60;

Ext.getCmp('countdownText').setHtml('<span class="text"><p class="val">'+dd+'</p><p class="type_days">Days</p></span><span class="text"><p class="val">'+hh+'</p><p class="type_hours">Hours</p></span><span class="text"><p class="val">'+mm+'</p><p class="type_minutes">Minutes</p></span><span class="text"><p class="val">'+ss+'</p><p class="type_seconds">Seconds</p></span>');

 setInterval('updateTimer()', 1000 );           }

我的问题是，这会对应用程序的性能产生影响吗？

html5 Web Workers会更高效吗？

有没有其他方法可以实现此功能？

Answer 1

您可以采取一些措施来大幅提高性能：

1，你的变量从来没有var声明...所以所有这些变量都存在于需要改变的窗口范围内！ 非常糟糕的做法，可能会导致意想不到的错误。

2， kickoff应该是函数之外的变量，因为不需要解析字符串并构建新的日期对象。

3，不要保存'now'变量，因为你再也不用它了。 做diff = kickoff - Date.now()

4，当你更新countdownText时，你传递了很多标记。 这需要DOM删除树中的元素，执行重绘和重排，然后向树中添加一堆新元素，并执行重绘和昂贵的重排（通常可以，但是每一秒都是一个巨大的性能命中）。 您应该尝试将其分解为仅更新文本节点。 因此，您应该有4个setHTML调用，您可以在其中更新文本，并且这些setHTML调用分别附加到与天，小时，分钟和秒相关联的元素。

最后，将updateTimer传递给setInterval而不是'updateTimer()' 。

就这些！ 在评论中帮助并提出任何问题的Hoep :)