Почему моя функция счетчика не увеличивается?

Question

В основном я хотел сделать обратный отсчет с помощью javascript, следуя моей логике, приведенный ниже код должен работать, но по неизвестной причине он не работает. Может ли кто-нибудь помочь мне понять, что не так с кодом? Это немного раздражает.

function startCounter(time)
{
    var counter= document.getElementById("counter").innerHTML;
    var min=0;

    setTimeout(function()
    {
        for(i = 0; i < time; i++)
        {
            document.getElementById("counter").innerHTML = min+ ":" +i;

            if(i == 59) {
                min++;
                i = 0

                document.getElementById("counter").innerHTML = min+ ":" +i; 
            }	
        }
    }, 1000)
};

startCounter(89);

<p id="counter">0:00</p>

Answer 1

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

Даже если вы исправили этот код, у вас будет проблема с тем фактом, что setTimeout не выполняет точно при указанном значении. Он срабатывает всякий раз, когда поток может поставить задачу в очередь> запланированное время. Таким образом, ваш таймер будет дрейфовать по продолжительности.

Я бы рекомендовал следующий подход. Используя цикл requestAnimationFrame (вы также можете использовать интервал), проверьте разницу в часах JavaScript между временем, которое вы начали, и now, а затем выведите разницу.

var firstTime;
function startTimer(){
  firstTime = Date.now();
  runTimer();
}
function runTimer(){
  var diff = Date.now() - firstTime;//value in milliseconds since the timer started.
  var sec = Math.floor((diff/1000)) % 60;//constrain to seconds
  var min = Math.floor(diff/(1000 * 60));//minutes
  document.getElementById('timer').innerHTML = min + ":"+(String(sec)).padStart(2,"0");
  requestAnimationFrame(runTimer);
}
startTimer();

<div id="timer">0:00</div>

Answer 2

Вы создаете бесконечный цикл.

Вы оборачиваете эту часть:

if(i == 59) {
    min++;
    i = 0

    document.getElementById("counter").innerHTML = min+ ":" +i; 
}   

в цикле for, который использует i в качестве ограничителя. Каждый раз, когда i достигает 59, вы сбрасываете его обратно в 0, и цикл продолжается.

// Add your code here

function startCounter(time)
{
    var counter= document.getElementById("counter").innerHTML;
    var min = parseInt(time / 60);
    var seconds = time % 60;

    setInterval(function()
    {
         
        seconds++;
         
         document.getElementById("counter").innerHTML = min+ ":" +seconds;

            if(seconds == 60) {
                min++;
                seconds = 0

                document.getElementById("counter").innerHTML = min+ ":" +seconds; 
            }	

    }, 1000)
};

console.log("Start");

startCounter(89);

<p id="counter">

</p>

Answer 3

var timer;
var i = 0;	
var counter = document.getElementById("counter");
var min = 0;
var targetTime = 5;
	
function startCounter(){
	
	if(min < targetTime){
		if(i == 59){
			min++;
			i = "00";
		} else {
			i++;
			if (i < 10) {
				i = "0"+i;
			}
		}
		counter.innerHTML = min + ":" + i;
	} else {
		clearInterval(timer);
	}
	
}

timer = setInterval(startCounter, 1000);

<p id="counter"></p>	

Answer 4

Не устанавливайте i обратно в ноль, поэтому ваше условие for (true) не всегда истинно, и ваш цикл не может остановиться.

function startCounter(time)
{
    var counter= document.getElementById("counter").innerHTML;
    var min=0;

    setTimeout(function()
    {
        for(i = 0; i < time; i++)
        {
            document.getElementById("counter").innerHTML = min+ ":" +i;

            if(i == 59) {
                min++;

                document.getElementById("counter").innerHTML = min+ ":" +i; 
            }	
        }
    }, 1000)
};

startCounter(89);

<p id="counter">0:00</p>

Answer 5

Проблема с этой строкой:

for(i=0;i<time;i++) {

У вас есть бесконечный цикл, если ваше время> 59, из-за этой строки:

if(i==59){
    //snip
    i=0
}

Поскольку ваша функция никогда не завершается, setTimeout никогда не завершается и браузер не обновляет ваш элемент.

Answer 6

У вас есть пара вариантов, которые будут работать. Повторный вызов startCounter из вашей функции setTimeout или мой любимый способ: window.setInterval .

    var p = document.getElementById("count");
  
  function startTimer(time){
    var num = 0; // the increment number
    var intervalId = window.setInterval(function(){
      num += 1; // increment the number
      if(num == time){
        window.clearInterval(intervalId);
        // you can run your callback here after the timer reached your goal
        startTimer(num + 1); // this just adds a second and restarts the timer as a example
      }
      p.innerText = num;
    }, 1000);
  }
  
  // Start the timer here
  startTimer(10);

<p id="count"></p>