-2

所以我试图改变图像并将它们变成一个循环，我想出了这个脚本，我遇到的问题是，当它改变到第二张图片时，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;
    }
}
4

3 回答 3

5

啊，我明白你在做什么。

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

尝试这个：

var timeoutId = null;

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

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

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

function changeImage(x) {
  document.getElementById("img").src = images[x];
  timeoutId = setTimeout(function() {
    changeImage((x + 1) % images.length);
  }, 3000);
}
于 2013-05-07T17:59:29.097 回答
1

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

我不知道你在追求什么其他解释......

您的代码永远不会达到以下条件：

if (x=2)

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

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

于 2013-05-07T17:54:48.687 回答
1

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

你真正想要的是这样的：

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

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

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

于 2013-05-07T18:07:02.847 回答