setTimeout /暂停/等

Question

我已经尝试了几种不同的方式，除了正确的。

试图这样：

setTimeout(function() { 
    $('.historyTextBoxes p') 
    .bind('showText', function(e) { 
     $(this).fadeIn(800, function(){ 
      $(this).next().length && $(this).next().trigger("showText"); 
     }); 
    }).eq(0).trigger('showText'); 
}, 4000); 

将等待4秒，然后淡入，一个每个段落之后另一个在0.800毫秒的速度。

我想要做的是在0.800毫秒淡入一个段落，然后等待4秒下一段落中消失之前

的基本设置：

$('.historyTextBoxes p') 
.bind('showText', function(e) { 
    $(this).fadeIn(800, function(){ 
     $(this).next().length && $(this).next().trigger("showText"); 
     alert('pause here'); 
    }); 
}).eq(0).trigger('showText'); 

作品但是我还没有找到正确的语法来让它停留在警报的位置。

我试图抛出调用一个函数，但我并不需要运行，除了是因为要等待什么。

因此，在伪代码中，我试图定义是这样的：

function wait() { 
    pause(for 4 seconds); 
} 

然后我可以调用该函数，而不是上面的警报。我的问题setTimeout已'定义一个函数'，但我在想什么。

Answer 1

使用setTimeout是正确的，但你在错误的地方应用它。

$('.historyTextBoxes p').bind('showText',function(e) { 
    $(this).fadeIn(800,function(){ 
    // this is the callback after the fadein 
    // here we want to wait (use a timeout) 
    var next = $(this).next(); 
    if (next.length) 
     setTimeout(function() { 
     // before the next text is shown 
     next.trigger("showText"); 
     }, 4000); 
    }) 
}).eq(0).trigger('showText'); 

Answer 2

这应做到：

function showAll() { 
    var p = $('.historyTextBoxes p').get(); // array of elements 

    (function loop() { 
     if (p.length) { 
      var el = p.shift(); 
      $(el).fadeIn(800).delay(4000).promise().done(loop); 
     } 
    })(); 
} 

演示在http://jsfiddle.net/4dNr3/2/

注意，这里使用没有明确的计时器在所有，也不使用任何事件触发下一个阶段 - 它依靠所有时机的动画队列。请注意，这不是一般一个好主意，混合定时器和动画，除非你能保证他们的交错，而不是并行运行。不过，在这种情况下没问题。