Question

所以我试图让图像改变并使它们成为一个循环，我想出了这个脚本，而我遇到的问题是，当它改为第二张图片时，javascript会冻结在我身上，我知道它的时间（真实）部分，但我不知道如何解决它，请帮助。
谢谢你

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;
    }
}

Answer 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);
}

Answer 2

您的浏览器冻结，因为JavaScript是单线程的;在循环完成之前，它将忽略所有输入和事件。

你真正想要的是这样的：

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

在每个周期，代码更改一个图像并退出，允许处理其他事件。

顺便说一下，我并没有尝试编写好的 JavaScript，只是为了回答你的问题。

Answer 3

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

我不确定你还有其他解释......

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

if (x=2)

因为它永远不会离开循环。提供一些逃避循环的方法。如果您的目的是定期循环图像，那么您可能应该考虑将图像放在计时器上。

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

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

3 个答案: