破解setInterval后的jQuery

Question

所以，我做了一个列表传播的例子，我.append()完全间隔.after()，所以我在主<li>内部附加，这非常愚蠢。然而，我认为是一个单词修复...结果是非常不同的。将.append()更改为.after()后，它只会填充一次，并且间隔不会继续。

var list = $('#theList li:last-child'),
    limit = 20,
    current = 0;

function rand() {
    return Math.random().toString(36).substr(2); // Just for some random contnt
}

$('#trigger').click(function() { // We're using a static button to start the population of the list
    var end = setInterval(function() {
        if ( current == limit ) {
            current = 0;
            clearInterval(end);
        }
        list.append('<li style="display:none;color:green;">' + rand() + '</li>');
        var newList = $('#theList li:last-child');
        newList.fadeIn();
        var colorEnd = setInterval(function() {
            newList.css('color', 'black');
            clearInterval(colorEnd);
        }, 350);
        current++;
    }, 300);
});

使用Jack的建议(DEMO)

修复了代码

var list = $('#theList li:last-child'),
    limit = 20,
    current = 0;

function rand() {
    return Math.random().toString(36).substr(2); // Just for some random contnt
}

$('#trigger').click(function() { // We're using a static button to start the population of the list
            var end = setInterval(function() {
            if ( current == limit ) {
                current = 0;
                clearInterval(end);
            }
            var elm = $('<li style="display:none;color:green;">' + rand() + '</li>');
            list = elm.insertAfter(list);               
            elm.fadeIn();
            var colorEnd = setInterval(function() {
                    elm.css('color', 'black');
                    clearInterval(colorEnd);
            }, 350);
            current =  current + 1;
        }, 300);
});

after() Version

append() Version

Answer 1

问题是list没有更新;第一次.after()发生后，它不再是最后一个孩子;这些元素仍然被添加，但是当你不断更新第一次迭代中已经可见的元素时，它们仍然是不可见的。

您可以像这样更新它：

var el = $('<li style="display:none;color:green;">' + rand() + '</li>')

list = el.insertAfter(list);

el.fadeIn();
// etc.