はJQuery：関数のすべてfadeout`sが

Question

を終了するまで、私は次の機能を持って待って：

function clearWorkingArea() { 
    $('.extensionText').children('span').fadeOut(600, function() { $(this).remove() }); 
     $('ul.texts').fadeOut(600, function() { $(this).empty() }); 
     $('.buttonsDiv').fadeOut(600, function() { $(this).remove() }); 
     $('.processingDiv').fadeOut(600, function() { $(this).remove() }); 
} 

私は、この関数内のすべてのアニメーションが終了した後にのみ、別の関数を呼び出すしたいと思います。 私が試した：

また

$.when(clearWorkingArea()).done(function() {...}); 

：

clearWorkingArea().promise().done(function() {...}); 

ありません運が、それはまだ正常に動作していません。 このような関数の動作を行うには、フェードのコールバック地獄ではなく、方法がありますか？

Answer 1

更新：ちょうどダブルチェックしjqueryの、アニメーションは約束を返すことができます。私は当初は約束をしましたが、jqueryで約束をするには約束してください（）。結局のところ、ヘルパー機能は必要ありません。

以下は例です。

同じことをやっているセレクタが複数ある場合は、組み合わせることもできます。例えば、 。 .two & .3つのフェードアウトは600msですが、私は1000ms以上のフェードアウトを行いました。また、存在しないセレクタを追加して、まだ動作することを確認します。

Promise.all(
 
    [ 
 
    $('.one').fadeOut(1000, function() { 
 
     $(this).empty(); }).promise(), 
 
    $('.two,.three').fadeOut(600, function() { 
 
     $(this).empty(); }).promise(), 
 
    $('.not-exist').fadeOut(600, function() { 
 
     $(this).empty(); }).promise() 
 
    ] 
 
).then(function() { 
 
    console.log('all done'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="one"> 
 
Three 1000 ms 
 
</div> 
 
<div class="two"> 
 
One 600 ms 
 
</div> 
 
<div class="three"> 
 
Two 600 ms 
 
</div>

Answer 2

clearWorkingAreaのみがアニメーションを開始しますが、これらのアニメーションはすべて非同期です。 clearWorkingAreaの末尾に、アニメーションが終了する可能性は低いです。

アニメーションごとに約束を取得し、すべての約束が終わったときにPromise.allを使用してコードをトリガーする必要があります。

文書によると、あなたは、メソッドのようなfadeOutのオプションでstartパラメータを使用して、約束を得ることができます： jQuery fadeOut()

は、この情報がお役に立てば幸い！

Answer 3

このような単純なロジックを適用してみましょう。

function doWorkWhenAllFinished(counter) { 
 
    if (counter == 4) { 
 

 
    //All fade animations have been complete. 
 
    //Good to go...  
 

 
    } 
 
} 
 

 

 
function clearWorkingArea() { 
 
    var counter = 0; 
 
    $('.extensionText').children('span').fadeOut(600, function() { 
 
    counter++; 
 
    $(this).remove(); 
 
    doWorkWhenAllFinished(counter); 
 
    }); 
 
    $('ul.texts').fadeOut(600, function() { 
 
    counter++; 
 
    $(this).empty(); 
 
    doWorkWhenAllFinished(counter); 
 
    }); 
 
    $('.buttonsDiv').fadeOut(600, function() { 
 
    counter++; 
 
    $(this).remove(); 
 
    doWorkWhenAllFinished(counter); 
 
    }); 
 
    $('.processingDiv').fadeOut(600, function() { 
 
    counter++; 
 
    $(this).remove(); 
 
    doWorkWhenAllFinished(counter); 
 
    }); 
 
}