質問: $("") .addClass("progress progress-striped active") .append($("") .addClass("progress-bar") .css("width", "100%") ); $(".ui-dialog-content").prepend(loading); } $.when( hoge() ).done(function() { // ajax通信(同期通信)の処理 hogehoge(); // ウィンドウを閉じる $(this).dialog("destroy").remove(); }); } }, { text: "キャンセル", type: "button", click : function() { // ウィンドウを閉じる $(this).dialog("destroy").remove(); }, }, ] }); ``` `.done()`処理内の`$(this).dialog("destroy").remove();`を削除したところ、下記のような動作となったため、 標題の「$.whenの中で行っているDOM操作が後から実行される」という動きになっていることが判明しました。 (1)ボタンを押下するとモーダルウィンドウが開く。 (2)モーダルウィンドウ内のボタンを押下すると、ローディングバーが表示されないままAjax通信が実行される。 (3)Ajax通信完了後、ローディングバーが表示される。 なお、`$.when`の中に`alert('hoge');`や`console.log('hoge');`を記載した場合、 Ajax通信の前にそちらが実行されますので、DOM操作だけが実行されないようです。 また、同期通信の箇所を非同期通信にしても結果は変わらなかったため、同期通信が原因というわけでもないのかな...と考えております。 「こういうところが原因ではないか」というようなヒントやアイデアだけでもいただけると幸いです。 よろしくお願いいたします。
回答: whenするときに$.Deferred()をつかってhogeの戻り値で resolve()をreturnしてみてはどうでしょうか? 追記 === ごめんなさいちょっと違いました ``` var d = new $.Deferred(); $.when(d).done(function(){ hogehoge() }); (function(d){ var loading = $("") .addClass("progress progress-striped active") .append($("") .addClass("progress-bar") .css("width", "100%") ); $(".ui-dialog-content").prepend(loading); d.resolve(); )(d); //hoge()の部分 } ```