而true循环会冻结浏览器的javascript

while true loop freezes up broswers javascript

本文关键字：浏览器 javascript 冻结 true 循环      更新时间：2023-09-26

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

啊，我知道你想干什么了。

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

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

我不确定你在找什么其他解释....

你的代码永远不会达到条件:

if (x=2)

，因为它永远不会跳出循环。提供一些逃离循环的方法。如果您的目的是定期循环图像，那么也许您应该考虑将图像设置为计时器。

而且，您的代码暗示有无限数量的图像

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

你真正想要的是这样的东西:

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

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

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

相关文章：