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循环作为一个篮子对您所做的任务进行成像。你的工作就是写一个欠条，把它放在篮子里作为一个＆＃34;以后做＆＃34;或者＆＃34;当我完成while循环的任务时执行此任务＆＃34;

因此，当您遍历循环时，每个setTimeout变为＆＃34;以便稍后执行＆＃34; IOU和while循环进入下一次迭代。由于递增任务是在其中之一＆＃34;以后做＆＃34;它们永远不会被执行的函数，因为它们正在等待while循环首先完成。因此无限循环。

要修复这个逻辑，你必须一起打破循环并使用自调用函数创建自己的循环逻辑：

var button = 0;

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

next();

将这条海峡保持在脑海中的一个好方法是将setTimeout与console.log交换在你的脑海中。使用console.log，您希望命令立即返回并继续。传递给setTimeout的函数将等到它定义的父函数完成后再调用你传递它的函数。在上面的示例中，{/ 1}}在父next()完成后被称为。

Answer 4

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

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

4 个答案: