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 转换为 String。因此，你会看到

嗨！，欢迎！，你好！

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

Answer 3

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

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

你从来没有要求他等待。您只是每 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 5

首先，您应该将代码包装在 onload 或 domready 函数中。 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>