Javascript更新时间函数导致高CPU

Question

我有以下代码用于显示当前日期和时间,我希望它始终更新,所以我有一个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);
    })();
});

Answer 1

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