setTimeout/pausing/etc

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

다음 0.800 밀리 초의 속도로 다른 후 하나의 각 단락을 페이드 4 초 동안 기다립니다.

는 내가 뭘 원하는 다음 단락은 페이드하기 전에 다음 4 초 기다린 0.800 MS에서의 단락을 페이드 인

의 기본 셋업 :.

$('.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/

주에서 - 그것은 모든 타이밍을 위해 애니메이션 대기열에 의존합니다. 은 일반적으로이 아니므로 타이머와 애니메이션을 병행하는 것이 좋으며, 병렬로 실행하는 대신 인터리브되도록 할 수 있습니다. 이 경우에는 괜찮습니다.