1. ホーム
  2. jquery

[解決済み] .each()が完了した後にjQueryの関数を呼び出す

2022-04-25 10:51:05

質問

jQueryで、以下のようなことは可能でしょうか? コールバックを呼び出す または イベントのトリガー を呼び出した後 .each() (または他のタイプの反復的コールバック)には 完了 .

例えば、この "fade and remove" を完了させたいとします。

$(parentSelect).nextAll().fadeOut(200, function() {
    $(this).remove();
});

を挿入する前に、いくつかの計算を行います。 新規 要素の後に $(parentSelect) . 既存の要素がまだjQueryから見えている場合、私の計算は正しくありませんし、任意の時間(各要素に200)スリープ/ディレイすることは、せいぜい脆弱なソリューションのように思われます。

私は簡単に .bind() をイベントコールバックで呼び出す方法がよくわかりません。 .trigger() 上記の繰り返しで 完了 . 明らかに、トリガーが複数回起動することになるので、反復の内部でトリガーを起動することはできません。

の場合 $.each() しかし、私はそれを強制されるのが嫌なので、反復コールバックに関してフローを制御するための他のエレガントな方法があることを期待していました。

どのように解決するのですか?

tvの回答に対する代替案です。

var elems = $(parentSelect).nextAll(), count = elems.length;

elems.each( function(i) {
  $(this).fadeOut(200, function() { 
    $(this).remove(); 
    if (!--count) doMyThing();
  });
});

なお .each() は、それ自体が シンクロナス - の呼び出しに続くステートメントは .each() が実行された後にのみ .each() の呼び出しが完了する。ただし、非同期操作の 開始 での .each() の繰り返しは、もちろんそれなりに続きます。これがここでの問題です。要素をフェードさせるための呼び出しはタイマー駆動のアニメーションであり、それらは独自のペースで継続されます。

したがって、上記のソリューションでは、いくつの要素がフェードしているかを追跡しています。各呼び出しは .fadeOut() は完了コールバックを取得します。コールバックは、関係するすべてのオリジナル要素を数えたことに気づくと、すべてのフェード処理が終了したことを確信して、その後の何らかのアクションを実行することができるようになります。

これは4年前の回答です(2014年のこの時点)。これを実現する現代的な方法は、おそらくDeferred/Promiseメカニズムを使うことでしょうが、上記はシンプルでうまくいくはずです。