Javascript更新时间函数导致高CPU

Javascript update time function causes high CPU

本文关键字：CPU 函数 更新 时间 Javascript      更新时间：2023-09-26

我有下面的代码，我用它来显示当前日期和时间，我希望它总是更新，所以我有一个setInterval来更新它每秒钟。这似乎导致页面占用了25%的CPU，并且它占用的内存只会随着页面的增加而不断攀升。

我能做些什么来提高它的性能吗?

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);
    })();
});

用setTimeout代替setInterval

上面的评论很好地解释了原因，但我要重申一遍。

您当前的函数将调度新的 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);
    })();
});
相关文章：