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時鐘/計時器中斷

回答

相關問題