延迟jQuery不起作用

Question

Hi guys I don't know why my timing function is not working. Consider the following code...

$( 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);
            });
        }
    });
});

I get a json by ajax and I want to show each message by creating time 1 or 2 seconds, it works but just the first time, but after that, all the messages appear at once.

If some one could help me please to understand whats is going on.

Thanks guys I will keep searching. :(

Answer 1

Just multiply the timeout delay in your .each loop by the iteration count to have it appear as an incremented delay for each message. Observe the following...

$.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 - simplified demo