而真正的循环冻结浏览器javascript答案

【问题标题】：while true loop freezes up broswers javascript而真正的循环冻结浏览器javascript
【发布时间】：2013-05-07 17:53:14
【问题描述】：

所以我试图改变图像并将它们变成一个循环，我想出了这个脚本，我遇到的问题是，当它变为第二张图片时，javascript 会冻结我，我知道 while(true) 部分，但我不知道如何解决它，请帮助。
谢谢你

var images = new Array();
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 3000);
var x=0;

function changeImage()
{
    while(true){
        document.getElementById("img").src=images[x]
        x++;
    }

    if (x=2){
        x=0;
    }
}

【问题讨论】：

“嘿，医生，我这样做会很痛”
这个值什么时候会改变？
循环结束必须有一个可变的终止条件。正如已经指出的那样，为了避免无限循环，请不要在循环条件中放入常量。

标签： javascript image loops while-loop

【解决方案1】：

啊，我明白你要做什么了。

while (true) 将永远循环同步。您想要的是每 3 秒（异步）不断更改图像。

试试这个：

var timeoutId = null;

function changeImage() {
  document.getElementById("img").src = images[x];
  x = (x + 1) % images.length;
  timeoutId = setTimeout(changeImage, 3000);
}

这样，changeImage 不会永远循环；但每次调用它时，它都会在 3 秒内安排另一个对 changeImage 的调用。这个异步过程将无限期地继续下去（你试图用while (true)做的事情）直到用户离开页面或者你选择调用clearTimeout(timeoutId)。

请注意，您还可以通过将全局变量 x 设置为 changeImage 的参数来摆脱它，如下所示：

function changeImage(x) {
  document.getElementById("img").src = images[x];
  timeoutId = setTimeout(function() {
    changeImage((x + 1) % images.length);
  }, 3000);
}

【讨论】：

使用 setInterval() 会更好。
这取决于；函数内部的setTimeout() 是无条件的，每次调用肯定需要不到三秒的时间。
@Jack：当然，如果这是您判断setInterval 何时优于setTimeout 的标准，那么请务必使用它。我怀疑许多其他人都同意您的观点，但是您很难说服我以一种方式或另一种方式实际上更好或更糟。我认为这只是一个 po-tay-to，po-tah-to 的事情。抛开偏好不谈，我要指出，我的建议是在changeImage 之外消除对x 的需求，仅适用于setTimeout。也许你认为这是一个愚蠢的提议。再说一次，我说这取决于口味。
不，我不认为这很愚蠢；这实际上是一个非常巧妙的解决方案。我可能会将x 绑定到函数本身来完成同样的事情=D
为了提高效率，您可能还想将 document.getElementById 从 changeImage 函数中提取出来。

【解决方案2】：

这是因为你故意创建了一个无限循环。

我不知道你还有什么其他解释......

你的代码永远不会达到这个条件：

if (x=2)

因为它永远不会脱离循环。提供一些方法来逃避循环。如果您打算定期循环图像，那么也许您应该考虑在计时器上获取图像。

此外，您的代码暗示有无限数量的图像。

【讨论】：

【解决方案3】：

您的浏览器死机是因为 JavaScript 是单线程的；它将忽略所有输入和事件，直到循环完成。

你真正想要的是这样的：

var x = 0; 
var nextImage= function () { 
    document.getElementById("img").src = images[x]; 
    x = (x + 1) % images.length;
}
setInterval(nextImage, 3000);

在每个循环中，代码都会更改一个图像并退出，以便处理其他事件。

顺便说一句，我并不是想写好的 JavaScript，只是为了回答你的问题。

【讨论】：