1

我需要在我的 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会更高效吗？

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

4

1 回答 1

3

您可以做一些事情来极大地提高性能：

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

第二，kickoff应该是函数之外的变量，因为不需要每秒解析一个字符串并构造一个新的日期对象。

第三，不要保存“现在”变量，因为你再也不会使用它了。做diff = kickoff - Date.now()

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

最后，传入updateTimersetInterval 而不是'updateTimer()'。

就这些！希望有帮助并在评论中提出任何问题:)

于 2013-06-27T14:19:18.597 回答