我有以下代码用于显示当前日期和时间,我希望它始终更新,所以我有一个setInterval来每秒更新它。这似乎导致页面占用了占CPU的25%,并且占用的内存只是在页面启动时间不断攀升。
我能做些什么来提高性能吗?
jQuery(function($){
(function update_time(){
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var dt = new Date();
var hr = dt.getHours() > 12 ? dt.getHours() - 12 : dt.getHours();
var mi = dt.getMinutes() < 10 ? "0" + dt.getMinutes() : dt.getMinutes();
var sd = dt.getSeconds() < 10 ? "0" + dt.getSeconds() : dt.getSeconds();
var div = dt.getSeconds() & 1 ? ":" : " ";
$('.hour').text(hr);
$('.minute').text(mi);
$('.second').text(sd);
$('.day').text(days[dt.getDay()]);
$('.month').text(months[dt.getMonth()]);
$('.date').text(dt.getDate());
$('.year').text(dt.getFullYear());
$('.time-divider').text(div);
setInterval(update_time, 1000);
})();
});
答案 0 :(得分:5)
上面的评论很好地解释了原因,但我会重申。
您的当前功能会在每次调用新 setInterval
时安排任何现有功能。在5
秒之后,您将32
个间隔运行。每秒这个数字加倍。
setTimeout
在一段时间后执行其回调函数一次。因此,一秒钟后超时将激活并过期,该函数将执行,并将创建一个新的超时。冲洗并重复。
jQuery(function($){
(function update_time(){
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var dt = new Date();
var hr = dt.getHours() > 12 ? dt.getHours() - 12 : dt.getHours();
var mi = dt.getMinutes() < 10 ? "0" + dt.getMinutes() : dt.getMinutes();
var sd = dt.getSeconds() < 10 ? "0" + dt.getSeconds() : dt.getSeconds();
var div = dt.getSeconds() & 1 ? ":" : " ";
$('.hour').text(hr);
$('.minute').text(mi);
$('.second').text(sd);
$('.day').text(days[dt.getDay()]);
$('.month').text(months[dt.getMonth()]);
$('.date').text(dt.getDate());
$('.year').text(dt.getFullYear());
$('.time-divider').text(div);
setTimeout(update_time, 1000);
})();
});