Question

我完全被困在这里。

我有一堆消息，每个消息都在div“msg_feed_frame_ $ i”中增加，因此消息1在div“msg_feed_frame_1”中，msg 2在“msg_feed_frame_2”中等等。我想淡化这些消息使用jquery一个接一个，但出于某种原因，无论我使用settimeout和setinterval做什么，代码都会立即将它们全部淡出。

这是我到目前为止所得到的：

function feed(i)
{
    var div = "#msg_feed_frame_";
    var fader = div.concat(i);
    $(fader).fadeIn(2000);

}

function timefade()
{
var num = 1;
for (num=1; num<=10; num++)
{
var t=setTimeout(feed(num),1000);
}
}

$(document).ready(function(){
        timefade();
    });

Answer 1

您的问题是for循环快速执行，并为每个函数调用设置从现在起1000ms的超时。这是解决这个问题的一种方法：

function feed(i) {
    var div = "#msg_feed_frame_";
    var fader = div.concat(i);
    $(fader).fadeIn(2000);

}

function timefade() {
    var num = 1;
    var fadeIt = function(i) {
        return function() { feed(i); };
    };
    for (num = 1; num <= 4; num++) {
        var t = setTimeout(fadeIt(num), num * 1000);
    }
}

$(document).ready(function() {
    timefade();
});

此外，您的原始代码正在传递setTimeout feed(i)函数调用（undefined）的结果，并且它需要function类型的对象1}}。我添加了一个辅助函数，它返回一个函数的引用，该函数将使用正确的参数调用feed。

在函数内捕获num的值称为闭包，一开始可能会令人困惑。检查this post out是否有关于循环内部闭包的一些很好的解释，并且它们是必要的。

以下是您的示例：http://jsfiddle.net/andrewwhitaker/tpGXt/

Answer 2

尝试使用jQuery .delay（）函数...

    function feed(i){
    var div = "#msg_feed_frame_";
    var fader = div.concat(i);
    $(fader).fadeIn(2000).delay(1000);
}
function timefade(){
 var num = 1;
 for (num=1; num<=10; num++){
   feed(num);
 }
}
$(document).ready(function(){
        timefade();
});

jscript / jquery：以1为单位淡入div，中间有暂停

2 个答案: