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>

Таким образом, ваш массив и я инициализируемся только один раз.

РЕДАКТИРОВАТЬ В ответ на комментарий:

<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

Прежде всего, вы должны обернуть свой код в функцию 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>

Answer 5

Ты никогда не просил его подождать.Вы просто вызываете одну и ту же функцию каждые 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>