Changing Values in a Form Causes Lag

I want to change the value of a from once a second, but when i use this code:

let btn = document.createElement("button");
function sleep (time) { // number of ms
  return new Promise((resolve) => setTimeout(resolve, time));
}
btn.innerHTML = "Save", btn.onclick = function() {
    var value = 0;
    while (true){
      sleep(1000).then(() => {if (value == 1){
        document.getElementById("input").setAttribute('value', '1');
        value += 1;
      } else if (value == 2){
        document.getElementById("input").setAttribute('value', '2');
        value += 1;
      } else if (value == 3){
        document.getElementById("input").setAttribute('value', '3');
        value += 1;
      } else if (value == 4){
        document.getElementById("input").setAttribute('value', '4');
        value += 1;
      } else if (value == 5){
        document.getElementById("input").setAttribute('value', '5');
        value += 1;
      } else if (value == 6){
        document.getElementById("input").setAttribute('value', '6');
        value += 1;
      } else if (value == 7){
        document.getElementById("input").setAttribute('value', '7');
        value += 1;
      } else if (value == 8){
        document.getElementById("input").setAttribute('value', '8');
        value += 1;
      } else if (value == 9){
        document.getElementById("input").setAttribute('value', '9');
        value += 1;
      } else if (value == 0){
        document.getElementById("input").setAttribute('value', '0');
        value = 0;
      }});
    }
}, document.body.appendChild(btn);

The tab completely locks up, and I am forced to reload it. I have also tried using document.getElementById("input").value = "value";, but that causes the same thing to happen. Does anyone know how to fix this (the form does not have a name)?

Answer

The problem is that you have a classic “busy loop” that locks up the browser in executing Javascript code, without giving the browser a chance to do anything else like update the UI or respond to user actions.

Your while true loop, with no break statement inside, simply runs forever. Each time it runs, you put a Promise there – the result of sleep(1000).then(...), but the resolution of that Promise never gets a chance to be observed. The .then doesn’t happen automatically after one second, regardless of what else is happening – it can only happen when the browser event loop schedules it to run, which it can’t ever do here because you’ve got synchronous (blocking) code that never ends, but which must be run first.

If, as it seems, you want the effect to run every second, don’t bother with a loop and just use setInterval rather than setTimeout. You don’t even want to use Promises here as Promises can only resolve once while setInterval runs its handler continually. So all you need is something like this:

btn.onclick = function() {
  var value = 0;
  setInterval(function() {/* what you had in the .then goes here */}, 1000);
};