更改表单中的值会导致延迟

Question

我想每秒更改一次 a 的值，但是当我使用此代码时：

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);

选项卡完全锁定，我不得不重新加载它。我也尝试过使用 document.getElementById("input").value = "value";，但这会导致同样的事情发生。有谁知道如何解决这个问题（表格没有名称）？

Answer 1

问题是你有一个经典的“忙循环”，它在执行 Javascript 代码时锁定浏览器，而不给浏览器机会做任何其他事情，比如更新 UI 或响应用户操作。

你的 while true 循环，里面没有 break 语句，只是永远运行s。每次它运行时，你都会在那里放一个 Promise - sleep(1000).then(...) 的结果，但是那个 Promise 的解析永远不会有机会被观察到。 .then 不会在一秒钟后自动发生，无论发生了什么 - 它只会在浏览器事件循环将它安排到运行时发生，这在这里永远不会发生，因为你有永不结束的同步（阻塞）代码，但必须先运行。

如果您希望效果每秒达到运行，请不要使用循环，只需使用 setInterval 而不是 setTimeout。您甚至不想在这里使用 Promises，因为 Promises 只能解析一次，而 setInterval 运行它的处理程序不断。所以你只需要这样的东西：

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

更改表单中的值会导致延迟

Changing Values in a Form Causes Lag

javascript

forms

loops