中断setInterval后的jQuery

因此，我制作了一个列表传播的示例，我将

.append（）

的

.after（）

完全隔开，因此我在主

中追加内容，这非常愚蠢。然而，我所认为的是一个词的修复。。。结果是完全不同的。将

.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);
});

var list=$（'theList li:last child'），
限值=20，
电流=0；
函数rand（）{
返回Math.random（）.toString（36.substr（2）；//仅用于一些随机内容
}
$（'#trigger'）。单击（function（）{//我们正在使用一个静态按钮来开始填充列表
var end=setInterval（函数（）{
如果（当前==限制）{
电流=0；
清除间隔（结束）；
}
list.append（'
'+rand（）+”
'）；
var newList=$（“#列表li:最后一个孩子”）；
newList.fadeIn（）；
var colorEnd=setInterval（函数（）{
css（'color'，'black'）；
clearInterval（colorEnd）；
}, 350);
电流++；
}, 300);
});

使用Jack的建议修复了代码

var list=$（'theList li:last child'），
限值=20，
电流=0；
函数rand（）{
返回Math.random（）.toString（36.substr（2）；//仅用于一些随机内容
}
$（'#trigger'）。单击（function（）{//我们正在使用一个静态按钮来开始填充列表
var end=setInterval（函数（）{
如果（当前==限制）{
电流=0；
清除间隔（结束）；
}
var elm=$（'
'+rand（）+”
'）；
列表=elm.insertAfter（列表）；
榆树（elm.fadeIn）（）；
var colorEnd=setInterval（函数（）{
css（'color'，'black'）；
clearInterval（colorEnd）；
}, 350);
电流=电流+1；
}, 300);
});

---

问题是

列表

没有得到更新；一旦第一个

.after（）

发生，它就不再是最后一个子项；元素仍然被添加，但在您从第一次迭代开始不断更新已经可见的元素时，它们仍然不可见

您可以这样更新它：

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

list = el.insertAfter(list);

el.fadeIn();
// etc.

var el=$（'
'+rand（）+'
'）
列表=el.insertAfter（列表）；
法代因（）；
//等等。

@Jack也只能填充一次。我使用interval，因为它会立即运行，并循环。我认为Timeout只在计时器之后运行，然后继续。

setInterval（）

不会立即运行内部函数，顺便说一句。@Jack谢谢。不管怎么说，为什么

.after（）

会有奇怪的行为？我想这是类似的，这就是为什么我尝试在循环中声明，但这是疯狂的。Lol花了一分钟的时间让我的头绕在变量的循环上，但我想我明白了。把自己称为两种元素。

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

list = el.insertAfter(list);

el.fadeIn();
// etc.