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

Question

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

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不会永远循环；但每次调用它都会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);
}