Javascript时钟/计时器中断

我打算构建多个计时器。我开始通过使用下面的代码构建一个简单的时钟。Javascript时钟/计时器中断

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

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

来源

2016-11-04 codenoob

你设定的时间间隔，这意味着它会反复做，你犯了一个新的间隔每一个循环，过不了多久你有上百万间隔的所有正在运行的，即改变的setTimeout。 –

可能的重复[为什么是setInterval使无限循环]（http://stackoverflow.com/questions/37200897/why-is-setinterval-making-infinite-loops） –

您可能内存不足，因为每个新的setInterval调用都会启动一个周期性函数。

所以每次调用updateTime时，都会启动一个新的。这意味着1个呼叫，2个呼叫，4 ... 2^n。（60秒后你将有2^60个电话，这是一个18位十进制数字）。你可能打算使用setTimeout

来源

2016-11-04 21:54:29

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

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

来源

2016-11-04 21:56:07

为什么不'onload =“setInterval（updateClock，200） “'？那么你不需要将字符串解释为代码... –

看看设置一个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>

来源

2016-11-04 22:11:36

Javascript时钟/计时器中断

回答

相关问题