Javascript clock/timer breaks

Я планирую построить несколько таймеров. Я начал с создания простых часов, используя следующий код.Javascript clock/timer breaks

проблема, часы будут работать в течение нескольких минут, и сайт сломается, я думаю, что это из-за нехватки памяти.

когда я консоль.log выход. Кажется, что команда запускается более одного раза в секунду. Счетчик для линии console.log будет сканировать 2, 4, 8, 16, 32, 64 и т. Д. И т. Д., Быстро удваивая в некоторые астрономические числа. и через несколько минут сайт станет неактивным.

Это проблема эффективности с кодом? Или просто невозможно использовать Java-скрипт, чтобы обновлять что-то каждую секунду. , потому что я планирую сделать несколько таймеров на одной странице. (возможно, около 5-10)

Я пробовал это на Google Chrome.

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 clock/timer breaks

ответ

Смежные вопросы