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

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语句，只是永远运行。每次它运行时，您都会在那里放置一个Promise——sleep(1000).then(...)的结果，但是该Promise的解析永远没有机会被观察到。不管发生了什么，.then不会在一秒钟后自动发生——它只能在浏览器事件循环安排它运行时发生，这在这里是不可能的，因为你有永远不会结束的同步(阻塞)代码，但必须先运行。

如果，看起来，你想让效果每秒钟运行一次，不要使用循环，只使用setInterval而不是setTimeout。你甚至不想在这里使用承诺，因为承诺只能在setInterval持续运行其处理程序时解析一次。所以你只需要像这样:

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