Question

我打算建立多个计时器。我首先使用以下代码构建一个简单的时钟。

问题是，时钟将运行几分钟而网站将会中断，我认为这是由于内存不足造成的。

当我在console.log中输出。看起来命令每秒运行一次以上。 console.log行的计数器会说2,4,8,16,32,64等等，快速加倍到一些天文数字。并且该网站将在几分钟内变得无响应。

这是代码的效率问题吗？或者使用java脚本每秒更新一次是不可行的。因为我打算在同一页面上制作多个计时器。（也许大约5-10）

我在谷歌浏览器上试过这个。

updateTime();
    function updateTime() {
        var d = new Date;
        var hours = d.getHours();
        var mins = d.getMinutes();
        var secs = d.getSeconds();
        var ampm = 'AM';
        if (hours >= 12) {
            ampm = 'PM';
        }
        if (hours > 12) {
            hours = hours - 12;
        }
        formatted_time = hours + ':' + mins + ':' + secs + ampm;
        //console.log(formatted_time);
        $("#currenttime").html(formatted_time);
        window.setInterval(updateTime, 1000);
    }

Answer 1

您可能因为每个新的setInterval调用启动一个周期性函数而耗尽内存。

因此每次调用updateTime时，都会启动一个新的。这意味着1个电话，2个电话，4个... 2 ^ n。（60秒后你会有2 ^ 60个电话。这是一个18位十进制数字。）只需n秒钟。你可能想要使用setTimeout

Answer 2

在函数内部设置setInterval，这意味着每次调用函数时都会运行setInterval当您使用window.setInterval(updateTime, 1000);调用函数时，它不会仅调用更新部分时间它会一次又一次地运行setInterval部分..所以你可以像......一样使用它。

＆＃13;

function updateTime() {
    var updateIt = function(){
       var d = new Date;
       var hours = d.getHours();
       var mins = d.getMinutes();
       var secs = d.getSeconds();
       var ampm = 'AM';
       if (hours >= 12) {
          ampm = 'PM';
       }
       if (hours > 12) {
         hours = hours - 12;
       }
       formatted_time = hours + ':' + mins + ':' + secs + ampm;
       console.log(formatted_time);
       $("#currenttime").html(formatted_time);
  }
  setInterval(updateIt, 1000);
}
updateTime();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="currenttime"></div>

＆＃13;

Answer 3

你是对的，内存不足会导致你的浏览器崩溃。试试这个，看看它是否会停止崩溃：

<!DOCTYPE html>
<html>
    <head>
        <title>The Time</title>
        <script type="text/javascript">
            // This function gets the current time and injects it into the DOM
            function updateClock() {
                // Gets the current time
                var now = new Date();

                // Get the hours, minutes and seconds from the current time
                var hours = now.getHours();
                var minutes = now.getMinutes();
                var seconds = now.getSeconds();

                // Format hours, minutes and seconds
                if (hours < 10) {
                    hours = "0" + hours;
                }
                if (minutes < 10) {
                    minutes = "0" + minutes;
                }
                if (seconds < 10) {
                    seconds = "0" + seconds;
                }

                // Gets the element we want to inject the clock into
                var elem = document.getElementById('clock');

                // Sets the elements inner HTML value to our clock data
                elem.innerHTML = hours + ':' + minutes + ':' + seconds;
            }
        </script>
    </head>
    <!--
        This is the key to making the clock function.
        When the page loads, it calls the javascript function "setInterval()",
        which will call our function "updateClock()" once every 200 milliseconds.
    -->
    <body onload="setInterval('updateClock()', 200);">
        <!-- This is the container for our clock, it can be any HTML element. -->
        <h1 id="clock"></h1>
    </body>
</html>

如果有，请查看http://momentjs.com/

Javascript时钟/计时器中断

3 个答案: