Wstrzymanie pętli while na 1000 ms

Question

Chcę, aby wartość ze zmiennej „sekundy” odejmowała się co 1000 ms.

function odliczanie()
{
	let godziny = document.getElementById("godziny").value;
	let minuty = document.getElementById("minuty").value;
	let sekundy = document.getElementById("sekundy").value;
	
	while(sekundy>0)
	{
		sleep(1000);
		sekundy--;
	}
	
	document.getElementById("minutnik").innerHTML=sekundy;
}

Co powinienem wpisać zamiast funkcji sleep?

Answer 1

Oznaczyłbym funkcję odliczanie jako async, wywołanie funkcji sleep poprzedził słówkiem await i w implementacji funkcji sleep zwrócił promis z setTimeout:

function sleep(timeInMs) {
  return new Promise((resolve) => setTimeout(resolve, timeInMs));
}

async function odliczanie() {
  // ...

  while(sekundy > 0) {
    await sleep(1000);
  }

  // ...
}

 

Comments

function sleep(timeInMs) {
  return new Promise((resolve) => setTimeout(resolve, (1000 * timeInMs)));
}
 
async function odliczanie() {
  // ...

  while(sekundy >= 0) {
    await sleep(1);
    
    // ...
  }
 
  // ...
}

 

Answer 2

Możesz też użyć setInterval()

przykład dla minut i sekund.  

<input id="godziny" type="number" min="0" max="23" value="0">
<span>:</span>
<input id="minuty" type="number" min="0" max="59" value="0">
<span>:</span>
<input id="sekundy" type="number" min="0" max="59" value="0">
<input id="start" type="button" value="start">
<input id="stop" type="button" value="stop">
<div id="minutnik"></div>

<script>
  let start_button, stop_button, minutnik_display, timerId;

  window.onload = () => {
    start_button = document.getElementById("start");
    stop_button = document.getElementById("stop");

    start_button.onclick = start;
    stop_button.onclick = stop;

    minutnik_display = document.getElementById("minutnik");
  }

  function start()
  {
    let godziny = parseInt(document.getElementById("godziny").value) || 0,
        minuty = parseInt(document.getElementById("minuty").value) || 0,
        sekundy = parseInt(document.getElementById("sekundy").value) || 0;

    start_button.disabled = true;

    timerId = setInterval(() => {
      if (godziny == 0 && minuty == 0 && sekundy == 0) stop();
      minutnik_display.textContent = `${minuty}`.padStart(2, '0') + ':' + `${sekundy}`.padStart(2, '0');
      
      if (sekundy > 0)
        --sekundy;
      else {
        sekundy = 59;
        --minuty;
        if (minuty <= 0) minuty = 0;
      }
    }, 1000);  
  }

  function stop()
  {
    clearInterval(timerId);
    start_button.disabled = false;
  } 
</script>