js setTimeout() 立即完成，没有任何 rest

Question

在编码时，我遇到了这个非常奇怪的问题。 我的代码如下：js

document.getElementById("id").style.width = "0%"
var a = 0;
setTimeout(function () {
    if (a <= 60) {
        document.getElementById("id").style.width = a + "%";
        a++;
    }
}, 100);

我希望它运行 60 次，每次将 div 的宽度更改 1% 但是，当我运行代码时，if 块使它立即完成，就好像超时不起作用一样。 谁能告诉我怎么了？ 提前致谢！

Answer 1

setTimeout function 仅在指定时间后执行一次（以毫秒为单位）。

如果要继续执行该块，则必须使用setInterval而不是setTimeout 。

setInterval继续调用 function 因为间隔被清除。

一旦目标实现，不要忘记调用clearInterval 。

 var a = 0; const interval = setInterval(function () { if (a <= 60) { console.log("Im being called"); document.getElementById("id").style.width = a + "%"; a++; } else { // Target achieved, clearing interval console.log("Im stoping execution"); clearInterval(interval) } }, 100);

 #id { height: 300px; background: orange; }

 <div id="id"></div>