Question

很抱歉，我的问题似乎很简单，但我仍在尝试弄清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>

非常感谢您提供任何帮助。

Answer 1

您可以改用setInterval。

<!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;
        setInterval(() => {
            document.getElementById("dynamicline").innerHTML = descriptions[i];
            i = (i + 1) % descriptions.length;
        }, 600)
    }
</script>

<body onload="changeDynamicText()">

<p id="dynamicline">Starting Text</p>

</body>
</html>

Answer 2

使用 while（true）时，它将阻塞JavaScript event loop，因此不再渲染身体的其余部分。

您可以通过异步工作来实现您想要的目标。您已经在其中使用过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);
}

Answer 3

您可以使用setInterval而不是setTimeout轻松地做到这一点。当您需要某样东西在一段时间内不断做某事时，请使用setInterval。

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

此外，将脚本标签作为HTML文档正文的最后一个元素，这也是一个很好的习惯。这样，您可以确保在尝试操作DOM之前已加载所有DOM内容。

这是一个JSFiddle，其代码如下：https://jsfiddle.net/mparson8/41hpLaqw/2/

<!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>

<body onload="changeDynamicText()">

<p id="dynamicline">Starting Text</p>
<script>
function changeDynamicText() {
        var descriptions = ['list','of','strings','to','loop','over'];
        let i = 0;
        let interval = window.setInterval(function () {
                document.getElementById("dynamicline").innerHTML = descriptions[i];
            i = i + 1;
            if (i >= descriptions.length) i = 0;
            }, 600);
    }
changeDynamicText();
</script>
</body>
</html>

Answer 4

while (true)始终阻塞页面，直到使用break语句完成页面为止，因为您的代码永远不会完成，因此您需要做的是在超时中调用函数本身（并使{{ 1}}一个用于跟踪数组位置的全局变量）

Answer 5

循环是阻止程序，无限循环是无限阻止程序。您需要的是基于时间的切换器-一种内置的超时功能，您可以以周期性的方式调用它-或一个时间间隔自动收录器。他们中的任何一个都可以...

  function changeDynamicText() {

       var descriptions =
            ['list','of','strings','to','loop','over'];
       var i = 0;

     setInterval( tick, 800 );

     function tick( ) { 
        dynamicline.innerHTML = descriptions[ i++ ];
       if(i >= descriptions.length-1 ) i = 0
     }
            
  }

<!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>

</script>

<body onload="changeDynamicText()">

<p id="dynamicline">Starting Text</p>

</body>
</html>

虽然True循环阻止页面加载

5 个答案: