javascript - javascript数组定时

Question

我错过了一些小东西.. 打印数组但不在行间等待。

<script type="text/javascript">

function showLines()
{
arr =
[
  "Hi!",
  "Welcome!",
  "Hello!"
]

var duration=2000;

document.getElementById("quotes").innerHTML=arr;
setTimeout('showLines()',duration);

}
</script>

Answer 1

那是因为你只是打印出整个数组，试试这个。

    function showLines(_index) {
       var arr =["Hi!", "Welcome!", "Hello!"], html = '', i, index = _index || 0,
       newIndex;

       for (i = 0; i < index && i < arr.length; ++i) {
          html += arr[i] + "<br />";
       }
       document.getElementById("quotes").innerHTML=html;

       newIndex = index + 1;
       if (newIndex < arr.length) {
          setTimeout(function() {showLines(newIndex);}, 2000);
       }
    }

这应该够了吧。

如果您一次只想要一个，请更换

           for (i = 0; i < index && i < arr.length; ++i) {
              html += arr[i] + "<br />";
           }

和

document.getElementById("quotes").innerHTML=arr[index];

Answer 2

线

document.getElementById("quotes").innerHTML=arr;

将通过用逗号连接来转换arr为 a 。String因此，你会看到

您好！，欢迎您！，您好！

这个函数是幂等的，这可能不是你想要的。我认为你缺少的是一个索引，它让你知道下次执行函数时你在数组的哪个元素上，并用quotes数组中的下一项替换元素的内容。

Answer 3

你从来没有要求他等。您只是每 2 秒调用一次相同的函数。尝试使用 showLines(i)、innerHTML += arr[i] 和 setTimeout(showLines,duration,i++)

<script type="text/javascript">

function showLines(i)
{
arr =
[
  "Hi!",
  "Welcome!",
  "Hello!"
]

var duration=2000;

document.getElementById("quotes").innerHTML += arr[i];
i++;
setTimeout(showLines,duration,i);

}
</script>

Answer 4

这里的大多数答案都是在每次迭代时重新初始化你的数组。这样做没有意义。你应该这样做：

<script type="text/javascript">

function showLines(){

    var arr =
    [
      "Hi!",
      "Welcome!",
      "Hello!"
    ], i = 0;

    (function showLinesHelper(){
        document.getElementById("quotes").innerHTML += arr[i++]+'<br />';
        if(i < arr.length)
            setTimeout(showLinesHelper, 2000);
    })();

}

</script>

这样它就可以工作，并且您的数组和 i 只初始化一次。

编辑回应评论：

<script type="text/javascript">

function showLines(){

    var arr =
    [["Hi!", 3000],
     ["Welcome!", 500],
     ["Hello!", 1000]]
    , i = 0;

    function showLinesHelper(){
        document.getElementById("quotes").innerHTML += arr[i++][0]+'<br />';
        if(i < arr.length)
            setTimeout(showLinesHelper, arr[i][1]);
    }

    setTimeout(showLinesHelper, arr[0][1]);
}

</script>

Answer 5

首先，您应该将代码包装在onloadordomready函数中。jQuery 擅长于此。你应该使用window.onload = myfunc;来做到这一点。

您的代码应如下所示：

<script type="text/javascript">
  var init = function () {
    var myarray = ["Hi!","Welcome!","Hello!"], index = 0, printline = function () {
      document.getElementById("quotes").innerHTML += myarray[index];

      if (index + 1 < myarray.length) {
        setTimeout(printline, 2000);
      }  
      index++;
    };
    printline();
  }
  window.onload = init;

</script>