[解決済み] .each()が完了した後にjQueryの関数を呼び出す
質問
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メカニズムを使うことでしょうが、上記はシンプルでうまくいくはずです。
関連
-
[解決済み] jQueryの各ループから抜け出すには?
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] jQuery Ajax呼び出し後のリダイレクトリクエストを管理する方法
-
[解決済み] jQuery 複数のイベントで同じ関数を起動する
-
[解決済み] javascript(またはjQuery)を使って::beforeや::afterなどのCSS疑似要素を選択し、操作する。
-
[解決済み] jQuery select onChangeの値を取得する。
-
[解決済み] 変更イベントでradioを使用するには?
-
[解決済み] jQueryでtextareaの値を設定する
-
[解決済み] ボタンやリンクを無効化・有効化する最も簡単な方法とは(jQuery + Bootstrap)
-
[解決済み】CSS3遷移の終了を待つためにjQueryを使用するには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
echarts-all.js:1 Uncaught TypeError: nullのプロパティ'getAttribute'を読み取ることができません。
-
[解決済み] jquery mobileでページ中央のグリッド表示
-
[解決済み] セレクトした要素の外側のHTMLを取得する
-
[解決済み] jQuery.ajaxでmultipart/formdataを送信する。
-
[解決済み] jQueryでPUT/DELETEリクエストを送信する方法は?
-
[解決済み] GoogleのCDNからjQuery UI CSSをダウンロードする
-
[解決済み] .text()を使って子タグにネストされていないテキストのみを取得する方法
-
[解決済み] jQuery セレクタ。Id Ends With?
-
[解決済み] jQueryで多段式フォームをリセットする
-
[解決済み】jQueryで入力不可属性をトグルする。