jQueryで、Aの処理がちゃんと終わってからBの処理をを実行しないと、エラーが出てしまうなどで、jQueryで処理の順番を指定したいときに便利な「.when()」と「.done()」の使い方。
jQuery関連記事
【jQuery】pdfが存在するか、mimeタイプのバリデーションする
jQuery UIのsortableを使ってリストをドラッグで並び替える
jQueryのモーダルウィンドウを使ってフォームの確認画面を実装する
HTMLのcanvasタグとJavaScriptで円グラフの画像をつくる
bxSliderをカルーセルやコンテンツスライダーなど便利なサンプル5種
bxSliderの使い方と、オプションでのカスタマイズ方法
select・optionタグをjQueryで、プルダウンの選択値を取得、変更する
jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する
jQueryでrequiredの専用エラー文と文字数制限のバリデーションをつくる
.when()で、最初に実行するものを指定
最初に実行したい処理を.when()
の中に書きます。.when()
で実行したい処理は複数書けるので、書くときは,(カンマ)で区切ります。
JavaScript
var myPromise = $.when( $("div").animate({left:300}) );
.done()は次に実行する処理を指定
.when()
で指定した処理が終わった後に実行したい処理を.done()
の中に書きます。.done()
も、実行したい処理は複数書けるので、書くときは,(カンマ)で区切ります。
JavaScript
myPromise.done(function() { $("div").fadeOut() });
.fail()で処理が失敗した場合を指定
.when()
もしくは.done()
の処理が失敗した場合、.fail()
を指定するとその処理を実行することができます。
JavaScript
myPromise.fail(function() { console.log('error'); });
.when()と.done()をメソッドチェーンでつなげて書く
.when()
と.done()
の処理をメソッドチェーンで繋げる事ができます。
この書き方の方がわかりやすくなりますね。
JavaScript
$.when( $("div").animate({left:300}) ) .done(function() { $("div").fadeOut() }) .fail(function() { console.log('error'); });
コメント