首页 文章

Javascript时钟/计时器中断

提问于
浏览 次
0

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

问题是，时钟将运行几分钟，网站将破裂，我认为这是由于内存不足 .

当我在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);
    }
javascript

3 回答

  • 3

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

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

    回复于
  • 1

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

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

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

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

    <!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/

    回复于

相关问题