Задержка jquery не работает

Question

Привет, ребята, я не знаю, почему моя функция синхронизации не работает. Рассмотрим следующий код ...

$(document).ready(function() { 
    $.ajax({ 
     type: 'GET', 
     url: 'conversation.json', 
     dataType: 'json', 
     success: function (data) { 
      var conversation = data.conversation1; 
      $.each(conversation, function(i, user) { 
       setTimeout(function() { 
        $('<li>').attr({ 
         class : 'list-group-item', 
        }).text(user.nombre + " : " + user.text). 
        appendTo('#messages'); 
       }, 3000); 
      }); 
     } 
    }); 
}); 

Я получаю JSON с помощью AJAX, и я хочу показать каждое сообщение, создавая время 1 или 2 секунды, он работает, но только в первый раз, но после этого, все сообщения появляются сразу.

Если кто-то может помочь мне, пожалуйста, понять, что происходит.

Спасибо, ребята, я продолжу поиск. :(

Answer 1

Просто умножьте задержку тайма-аута в своем .each цикле счетчик цикла, чтобы иметь вид, как порядковая задержка для каждого сообщения Обратите внимание на следующее ...

$.each(conversation, function(i, user) { 
    setTimeout(function() { 
     $('<li>').attr({ 
      class : 'list-group-item', 
     }) 
     .text(user.nombre + " : " + user.text) 
     .appendTo('#messages'); 
    }, 3000 * (i + 1)); // 3000, 6000, 9000 etc. 
}); 

JSFiddle Link. - упрощенный демо