javascript - 延迟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);
            });
        }
    });
});

我通过ajax获取一个json，我想通过创建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 - 简化的演示