Как поставить этот таймер в петлю? JS

Question

function countdown() { 
     var secs = 60; 
     function timer() { 
      var counter = document.getElementById("counter"); 
      secs--; 
      counter.innerHTML = "0:" + (secs< 10 ? "0" : "") + String(secs); 
      if(secs > 0) { 
       setTimeout(timer, 1000); 
      } else { 
       alert("Game over, you did not get to finish the game on time :("); 
       document.getElementById('memory_board').innerHTML = ""; 
         newBoard(); 
      } 
     } 
     timer(); 
    } 

    countdown(); 

Как разместить этот код в цикле? Это в основном таймер, который начинается с 60 и заканчивается на 0, и когда это происходит, игра перезапускается. У меня нет проблем с перезагрузкой игры, но я просто не знаю, как поместить этот код в цикл. Я посмотрел в codeacademy и говорит за цикл, я должен использовать

for (var x; y;z) { 
    //code 
} 

где х начало у, где она заканчивается, и г, как она меняется. Пожалуйста, помогите мне разобраться, я немного смущен.

Answer 1

Возможно, вы захотите изучить setInterval. Он называет данную функцию каждые n миллисекунд. Вы можете структурировать функцию обратного отсчета времени, как так:

function countdown(seconds) { 
    var interval = setInterval(function() { 
     if (seconds < 0) clearInterval(interval); //break the interval 
     seconds--; 
     //code 
    }, 1000); //time in millaseconds to wait 
} 

Answer 2

Вам просто нужно поместить этот код в файл javascript, на который ссылается ваш html-файл. Или вы можете просто обернуть этот код javascript в тег <script> </script>. Это должно привести к запуску кода при загрузке веб-страницы.

Если вы пытаетесь сделать запуск функции countdown() в цикле на основе времени, вы также можете попробовать setInterval(countdown(), time_in_milliseconds);

setInterval будет работать переданному в функции каждые х миллисекунд.

Answer 3

Это будет делать то, что вы хотите: DEMO

setInterval(function() { 
    countdown(); 
    },60000); 

function countdown() { 
     var secs = 60; 
     function timer() { 
      var counter = document.getElementById("counter"); 
      secs--; 
      counter.innerHTML = "0:" + (secs< 10 ? "0" : "") + String(secs); 
      if(secs > 0) { 
       setTimeout(timer, 1000); 
      } else { 
       alert("Game over, you did not get to finish the game on time :("); 
       document.getElementById('memory_board').innerHTML = ""; 
         newBoard(); 
      } 
     } 
     timer(); 
    } 

    countdown(); 

Answer 4

первую очередь, не следует использовать счетчик-щелочное отсчет времени в JavaScript, так как setTimeout (foo, 1000) не так точен, как вы думали. FYI: http://ejohn.org/blog/how-javascript-timers-work/

изменить код, чтобы он мог отсчитывающий правильно, попробуйте выполнить следующие действия вместо:

function countdown() { 
    var secs = 60, 
     startTime = new Date().getTime(), // <-- new here 
     endTime = startTime + secs * 1000; // <-- new here 
    function timer() { 
     var counter = document.getElementById("counter"); 
     secs = Math.floor((endTime - new Date().getTime())/1000); // <-- modify here 
     counter.innerHTML = "0:" + (secs< 10 ? "0" : "") + String(secs); 
     if(secs > 0) { 
      setTimeout(timer, 1000); 
     } else { 
      alert("Game over, you did not get to finish the game on time :("); 
      document.getElementById('memory_board').innerHTML = ""; 
        newBoard(); 
     } 
    } 
    timer(); 
} 

countdown(); 

иметь этот код в цикле, это может быть хорошо завернул его в качестве объекта и проход какой вы хотите после обратный отсчет закончился.

function newCounter(_secs, _callback) { 
    var executeWhenEnd = _callback, 
     secs = _secs; 
    function countdown() { 
     var startTime = new Date().getTime(), // <-- new here 
      endTime = startTime + secs * 1000; // <-- new here 
     function timer() { 
      var counter = document.getElementById("counter"); 
      secs = Math.floor((endTime - new Date().getTime())/1000); // <-- modify here 
      counter.innerHTML = "0:" + (secs< 10 ? "0" : "") + String(secs); 
      if(secs > 0) { 
       setTimeout(timer, 1000); 
      } else { 
       callback(); 
      } 
     } 
     timer(); 
    } 
    return { 
     countdown: countdown 
     }; 
} 

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

var counter1 = newCounter(60, function(){ 
     //fire after 60 seconds 
     alert("Game over, you did not get to finish the game on time :("); 
     document.getElementById('memory_board').innerHTML = ""; 
     newBoard(); 
    }), 
    counter2 = newCounter(5, function() { 
     //fire after 5 seconds. 
    }); 
counter1.countdown(); // start countdown 
counter2.countdown(); // start countdown 

Надеется, что это помогает.