在setTimeout中使用fadeOut的計時問題

Question

我的jQuery代碼有問題。

首先，它將顯示帶有改組效果的文本，然后在11秒鍾后淡出並再次執行此操作。 一段時間后，我在開始改組效果時獲得了fadeOut效果。

看來他們在不同的時間軸上運行。

$( document ).ready( function(){

     function textShuffle() {
        $( "#text" ).shuffleLetters().fadeIn().delay( 11000 ).fadeOut( 400 );
        setTimeout( textShuffle, 12000 );
     }
     textShuffle();

});

我怎樣才能解決這個問題。

Answer 1

也許您應該在fadeOut完成后調用遞歸方法，如下所示：

$( document ).ready( function() {

    function textShuffle() {
        $("#text").shuffleLetters().fadeIn().delay(11000).fadeOut(400, Function() {
            setTimeout(textShuffle, 12000);});
    }

    textShuffle();
});

Answer 2

在通過刪除.shuffleLetters（）提及@ alexander-nied后，其余腳本工作正常，我意識到該函數需要花費超過600ms的時間才能完成，而且我無法確定完成該任務需要多少時間。

所以現在我在調用setTimeout（）之前將promise（）添加到#text中

function textShuffle() {
    $( "#text" ).shuffleLetters().fadeIn().delay( 11000 ).fadeOut( 400 );
    $( "#text" ).promise().done( function(){
            setTimeout( textShuffle, 1 );
    });
 }