Javascript更新时间函数导致高CPU

我有下面的代码，我用它来显示当前的日期和时间，我希望它总是更新，所以我有一个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);
    })();
});

jQuery（函数（$）{
（函数update_time（）{
风险值月份=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
风险值天数=[“周日”、“周一”、“周二”、“周三”、“周四”、“周五”、“周六”]；
var dt=新日期（）；
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'）。文本（hr）；
$（'.minute'）。文本（mi）；
$（'.second'）.text（sd）；
$（'.day'）.text（days[dt.getDay（）]）；
$（'.month'）.text（月[dt.getMonth（）]）；
$（'.date'）.text（dt.getDate（））；
$（'.year'）.text（dt.getFullYear（））；
$（'分时器'）.text（div）；
设置间隔（更新时间，1000）；
})();
});

使用而不是

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

当前函数将在现有函数的基础上，在每次调用时安排一个新的

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

jQuery（函数（$）{
（函数update_time（）{
风险值月份=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
风险值天数=[“周日”、“周一”、“周二”、“周三”、“周四”、“周五”、“周六”]；
var dt=新日期（）；
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'）。文本（hr）；
$（'.minute'）。文本（mi）；
$（'.second'）.text（sd）；
$（'.day'）.text（days[dt.getDay（）]）；
$（'.month'）.text（月[dt.getMonth（）]）；
$（'.date'）.text（dt.getDate（））；
$（'.year'）.text（dt.getFullYear（））；
$（'分时器'）.text（div）；
设置超时（更新时间，1000）；
})();
});

是。每个

setInterval

调用

update\u time

，它调用

setInterval

，它调用

update\u time

，它调用。。。因此，如果要每次调用计时器，请使用setTimeout，否则在函数外部调用setInterval（），将setInterval（）更改为setTimeout（）

setInterval

每1秒调用一次

update\u time

，而

setTimeout

只调用一次

update\u time

，1秒钟后，完美，正是我所需要的。现在内存保持在17mb左右，CPU占用率为0-1%。谢谢大家！