并发循环中的setTimeout使浏览器崩溃
我试图通过添加到它的.style.left来移动一个图像，直到我尝试添加一个was循环(添加到它的左值为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");
}
}为什么会发生这种事？我是进入了无限循环，还是什么？
编辑:有没有其他的方法，聪明的方法？
回答 4
Stack Overflow用户
发布于 2014-03-22 21:58:36
while构造是一个同步操作。因此，您只需要添加到堆中，直到浏览器耗尽内存。你需要的是一个自调用函数。
想象这种情况的最佳方式是把setTimeout看作是借债或债务系统。将您使用while循环完成的任务想象为一个篮子。您的任务是编写一个IOU，并将其放入篮子中，作为“待会儿执行”或“在完成while循环任务时执行此任务”。
因此，当您在循环中迭代时，每个setTimeout就变成了一个“以后要做”的IOU，而while循环将进入下一个迭代。由于增量任务位于“以后执行”函数之一，因此它们永远不会被执行，因为它们正在等待while循环首先完成。因此产生了无限循环。
要修复此逻辑，您必须将所有循环都从循环中分离出来，并使用自调用函数创建自己的循环逻辑：
var button = 0;
function next() {
button++;
if (button < 10) {
setTimeout(next, 1000);
}
}
next();在你脑海中保持这一困境的一个好方法是将setTimeout与头脑中的console.log交换。使用console.log，您希望命令立即返回并继续前进。传入setTimeout的函数在调用传递给它的函数之前，将等到它被定义为父函数才能完成。在上面的示例中，next()是在父next()完成后调用的。
Stack Overflow用户
发布于 2014-03-22 21:51:04
您构建了一个没完没了的循环！button++在您的回调中递增，但是只有在循环结束时才执行回调，因为JavaScript是单线程的。
Stack Overflow用户
发布于 2014-03-22 21:51:01
这是一个无限循环，因为Javascript是单线程的，所以在while循环完成之前，所有回调都不会执行，因为在回调执行之前，按钮不会增加。
https://stackoverflow.com/questions/22584035
复制相似问题
腾讯云开发者
