while 循环中的 setTimeout 使我的浏览器崩溃

Question

我试图通过添加到其 .style.left 和所有工作来移动图像，直到我尝试添加一个 while 循环（添加直到其左值为 90）并添加 setTimeout 以便移动可见。 问题是 HTML 甚至不再加载，一段时间后它要求我停止脚本或继续 - 这两者都没有帮助，我被迫终止浏览器。

这是相关的代码：

    function sprint(){
    button = parseInt(document.getElementById("azisButton").style.left.split("%")[0]);
    while(button<10){
        setTimeout(function(){
            button++;
            //console.log(button);
        }, 1000);
        //console.log("Tady");
    }
}

为什么会发生？ 我会进入无限循环还是什么？

编辑：有没有办法以其他聪明的方式做到这一点？

Answer 1

你建立了一个无限循环！ button++在回调中递增，但回调仅在循环结束时执行，因为 JavaScript 是单线程的。

Answer 2

这是一个无限循环，因为 Javascript 是单线程的，在 while 循环完成之前，您的任何回调都不会执行，这永远不会发生，因为按钮在回调执行之前不会递增。

Answer 3

while 构造是一个同步操作。 因此，您只是添加到堆中，直到浏览器内存不足。 你需要的是一个自调用函数。

想象这一点的最佳方式是将setTimeout视为借据或债务系统。 将您使用 while 循环所做的任务想象成一个篮子。 你的工作是写一个借据并将它放在篮子里作为“稍后做”或“当我完成while循环的任务时做这个任务”

因此，当您遍历循环时，每个setTimeout变成了“稍后执行”的 IOU，而 while 循环将进入下一次迭代。 由于递增任务位于“稍后执行”函数之一中，因此它们永远不会执行，因为它们正在等待 while 循环先完成。 因此无限循环。

要修复此逻辑，您必须一起跳出循环并使用自调用函数创建自己的循环逻辑：

var button = 0;

function next() {
  button++;
  if (button < 10) {
    setTimeout(next, 1000);
  }
}

next();

记住这个setTimeout一个好方法是在你的脑海中将setTimeout与console.log互换。 使用console.log您希望命令立即返回并继续。 传递给setTimeout的函数将等到它定义的父函数完成，然后再调用您传递给它的函数。 在上面的例子中next()称为父后next()结束。

Answer 4

function sprint(){
    button = parseInt(document.getElementById("azisButton").style.left.split("%")[0]);
    if(button > 90){
        // move button code here
        setTimeout(sprint, 1000);
    }
}