如果我的问题看起来很简单，我深表歉意，我仍在尝试弄清楚 JavaScript。我正在建立一个网站，我想要 <p> 的内容不断改变。我希望它循环遍历我的 javascript 代码中定义的数组的内容。然而，当我把所有东西都放在 while (true) 中时(因为我希望它不断发生)，<p>内容永远不会改变，页面卡在加载上。
这是我到目前为止的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="about.css">
<meta charset="UTF-8">
<title>My Site</title>
</head>
<script>
function changeDynamicText() {
var descriptions = ['list', 'of', 'strings', 'to', 'loop', 'over'];
let i = 0;
while (true) {
window.setTimeout(function() {
document.getElementById("dynamicline").innerHTML = descriptions[i];
}, 600);
i = i + 1;
if (i >= descriptions.length) i = 0;
}
}
</script>
<body onload="changeDynamicText()">
<p id="dynamicline">Starting Text</p>
</body>
</html>非常感谢任何形式的帮助。
最佳答案
当你使用while(true)时，它会阻止 JavaScript event loop因此不再渲染 body 的其余部分。
您可以通过异步工作来实现您想要做的事情。您已经在其中使用了 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);
}
关于javascript - 虽然 True 循环会阻止页面加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56419832/