Задержка для цикла в JQuery

Question

У меня есть скрипт ниже, который работает; Я хочу, чтобы каждый элемент массива отображался в течение нескольких секунд до того, как цикл продолжится. Как это можно сделать в JQuery?

<script> 
$(document).ready(function() { 
    $("#x").click(function() { 
     $.get('testfile.htm', function (data) { 
      var i = 0; 
      var mydata = []; 

      $('#dc').html(data); 

      $('#dc').find('div').each(function() { 
       mydata[i] = $(this).text() 
       i++; 
      }); 

      for (id = 0; id < mydata.length; id++) { 
       $('#res').text(mydata[id]); 
      } 
     }) 
    }); 
}); 
</script> 

Answer 1

Попробуйте это:

for (var id = 0; id < mydata.length; id++) { 
    (function (id) { 
     setTimeout(function() { 
      $('#res').text(mydata[id]); 
     }, 3000 * id); // Change 3000 to the delay you want, in ms 
    }(id)); 
} 

По существу, каждый setTimeout вызов возвращается мгновенно, поэтому увеличиваем каждую задержку 3000   мс (или около того) так что каждый вызов .text разделяется по меньшей мере на 3000   мс.

Answer 2

Использование SetTimeout()

Это не JQuery, как вы просили, но он получает работу. Ниже приведен пример кода, который я создал для проекта.

setTimeout(function() { 
      Scroller.Animate("down") 
     }, 10000); 

10000 - 10 секунд.

Так что вы хотели бы сделать что-то вроде

 for(id = 0; id < mydata.length; id++) 
     { 
      setTimeout(function(){ 
       $('#res').text(mydata[id]) 
      }, 5000); 
     } 

Answer 3

Вы можете использовать очередь fx и просто queue все ваши изменения текста с задержкой между каждым изменением. Это также позволит вам легко использовать анимации, такие как fadeOut и fadeIn.

_{JQuery путь:}

$.each(mydata, function (i, val) { 
    $('#res').queue(function (n) { 
     $(this).text(val); 
     n(); 
    }).delay(1000); //how many miliseconds between text changes 
    //or with a simple fade in-out effect: 
    //}).fadeIn().delay(1000).fadeOut(); 
}); 

_{оригинал:}

for (id = 0; id < mydata.length; id++) { 
    $('#res').text(mydata[id]); 
}