Javascript 而True循环阻止页面加载

如果我的问题看起来很简单，我很抱歉，我仍在试图弄明白JavaScript。我正在建立一个网站，希望

的内容不断变化。我希望它在javascript代码中定义的数组内容上循环。但是，当我将所有内容放入

中时（true）

（因为我希望它不断发生），

内容永远不会更改，页面在加载时会被卡住

以下是我目前掌握的代码：

我的网站
函数changeDynamicText（）{
var descriptions=['list'、'of'、'strings'、'to'、'loop'、'over']；
设i=0；
while（true）{
setTimeout（函数（）{
document.getElementById（“dynamicline”）.innerHTML=descriptions[i]；
}, 600);
i=i+1；
如果（i>=descriptions.length）i=0；
}
}
开始文本

您可以使用

setInterval

我的网站
函数changeDynamicText（）{
变量描述=['list'、'of'、'strings'、'to'、'loop'、'over']；
设i=0；
设置间隔（（）=>{
document.getElementById（“dynamicline”）.innerHTML=descriptions[i]；
i=（i+1）%s.length；
}, 600)
}
开始文本

您可以使用

setInterval

而不是

setTimeout

轻松完成此操作。当您需要在一段时间内持续做某事时，请使用

setInterval

我将

I

操作移到了间隔内，因为您希望每次调用函数时都执行该操作

此外，将脚本标记作为HTML文档正文的最后一个元素也是一个非常好的习惯。通过这种方式，您可以确保在尝试操作DOM之前加载了所有DOM内容

下面是一个JSFIDLE，代码如下：

我的网站
开始文本
函数changeDynamicText（）{
变量描述=['list'、'of'、'strings'、'to'、'loop'、'over']；
设i=0；
let interval=window.setInterval（函数（）{
document.getElementById（“dynamicline”）.innerHTML=descriptions[i]；
i=i+1；
如果（i>=descriptions.length）i=0；
}, 600);
}
changeDynamicText（）；

当您使用while（true）时，它将阻止渲染，因此不再渲染身体的其余部分

通过异步工作，您可以实现您想要做的事情。您已经在其中使用了setTimeout，但也可以使用setInterval定期触发该方法

function changeDynamicText() {
    var descriptions = ['list','of','strings','to','loop','over'];
    let i = 0;

    setInterval(function () {
        document.getElementById("dynamicline").innerHTML = descriptions[i];
        i = i + 1;
        if (i >= descriptions.length) i = 0;
    }, 600);
}

while（true）

始终使用

break

语句阻塞页面，直到页面完成为止。在您的代码中，永远不会完成，因此您需要做的是在超时时调用函数本身（并将

i

设为全局变量以跟踪数组位置）

---

循环是拦截器无限循环是无限拦截器。你需要的是一个基于时间的切换器——一个内置的超时功能，你可以周期性地调用它——或者一个基于时间间隔的切换器。他们中的任何一个都可以

函数changeDynamicText（）{
变量描述=
['list'、'of'、'strings'、'to'、'loop'、'over']；
var i=0；
设定间隔（滴答，800）；
函数tick（）{
dynamicline.innerHTML=描述[i++]；
如果（i>=descriptions.length-1）i=0
}
}

我的网站
开始文本

JavaScript是单线程的。对

setTimeout（）

的调用立即返回。您编写的代码将不停地运行，不等待任何东西。事实上，它阻止页面绘制！（即在屏幕上渲染的）。

function changeDynamicText() {
    var descriptions = ['list','of','strings','to','loop','over'];
    let i = 0;

    setInterval(function () {
        document.getElementById("dynamicline").innerHTML = descriptions[i];
        i = i + 1;
        if (i >= descriptions.length) i = 0;
    }, 600);
}

let i = 0;
function changeDynamicText() {
    var descriptions = ['list','of','strings','to','loop','over'];
    setTimeout(function () {
        document.getElementById("dynamicline").innerHTML = descriptions[i];
        changeDynamicText()
    }, 600);
    i = i + 1;
    if (i >= descriptions.length) i = 0;
}