setTimeout中使用fadeOut的定时问题

Question

我的 jQuery 代码有问题。

开始时它显示带有随机效果的文本，然后在 11 秒后淡出并再次执行此操作。过了一会儿，我在洗牌效果的开始得到了淡出效果。

他们似乎运行在不同的时间线上。

$( 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

@alexander-nied 提到通过删除 .shuffleLetters() 其余脚本工作正常后，我意识到该函数需要超过 600 毫秒才能完成，我无法确定完成任务需要多少时间。

所以现在我在调用 setTimeout() 之前将 promise() 添加到 #text

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

setTimeout中使用fadeOut的定时问题

Timing problem by using fadeOut in setTimeout

javascript

jquery

settimeout

fadeout