Таймер обратного отсчета с петлей для цикла

Question

Я делаю таймер pomodoro, чтобы помочь улучшить Javascript. Пока мне удалось превратить ввод пользователя в минуты, но я не могу создать таймер обратного отсчета с помощью console.log.

ПРЕДУПРЕЖДЕНИЕ. Кажется, что он разорвал браузер.

Это моя скрипка: http://jsfiddle.net/tmyie/YcBh9/

Javascript:

 var doc = document, 
      timer = doc.getElementsByClassName('timer')[0], 
      button = doc.getElementsByTagName('button')[0]; 

     button.onclick = function() { 
      var input = doc.getElementById('input').value; 
      var speed = (input * 1000) * 60; 

      for (i = speed; speed > 1; i - 1000) { 

       console.log(i); 
      } 
     } 

HTML:

<div class="timer"></div>I am going to spend 
<input id="input"></input>minutes working 
<button>Go!</button> 

Answer 1

вашего для петли разве deincrementing должным образом, вызывая бесконечный цикл. вам нужно -= не только -, и вы проверяете speed, когда вы должны проверять i,

for (i = speed; i > 1; i -= 1000) { 

Answer 2

Во-первых, ваш цикл является неправильным. Условие остановки - speed > 1, но вы никогда не изменяете speed. Кроме того, speed - 1000, ничего не сделает. Вам необходимо либо speed = speed - 1000, либо speed -= 1000, чтобы изменить speed. Я полагаю, что вы действительно хотели что-то вроде:

for(i = speed; i > 1; i -= 1000) { 
    ... 
} 

Тем не менее, лучше использовать setInterval в этом случае. Вы не хотите использовать циклы, потому что JavaScript однопоточен, и цикл блокирует пользовательский интерфейс (как вы обнаружили). Так что вы можете сделать что-то вроде этого:

button.onclick = function() { 
    var input = parseInt(doc.getElementById('input').value, 10); 
    var speed = (input * 1000) * 60; 

    var interval = setInterval(function() { 
     speed -= 1000; 
     console.log(speed); 

     if(speed <= 1) { 
      clearInterval(interval); 
      console.log("All done!"); 
     } 
    }, 1000); //poll every second. 
}; 

Answer 3

Не используйте for петлю, используйте setTimeout вместо этого. В противном случае цикл блокирует любой дополнительный код и взаимодействие с пользователем, включая любую попытку обновления пользовательского интерфейса, чтобы показать прогресс таймера. Попробуйте вместо этого:

button.onclick = function() { 
    var input = doc.getElementById('input').value; 
    var remaining = (input * 1000) * 60; 

    function updateTimer() { 
     console.log((remaining/1000) + " seconds remaining"); 
     remaining -= 1000; 
     if(remaining > 0) setTimeout(updateTimer, 1000); 
    } 
    updateTimer(); 
} 

http://jsfiddle.net/YcBh9/1/