質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.36%

jQueryでイベント後に処理を行う方法

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 3,005

mocchi

score 15

これはちょっと試しに書いたコードですがajaxでデータを取ってきた後そのデータで設定(setGrid)
を行います。(bootstrapのcollapseを使用しています)

$.when( ajaxGet(url) )
        .done(function(data) {

            var procSetting = (function () {
                var d = new $.Deferred();

                //ajaxでとってきた値での設定
                var setGrid = (function () {
                    return function () {
                        console.log("setGrid");
                    };
                }());

                return function (collapseopened) {
                    if( collapseopened ){
                        $('#collapse').addClass('no-transition');

                        $('#collapse').bind('shown.bs.collapse',function(e){
                            setGrid();

                            $(this).unbind(e);
                            $(this).collapse('hide');
                            $(this).removeClass('no-transition');

                            d.resolve();
                        })

                        $('#collapse').collapse('show');
                    }
                    else{
                        setGrid();
                        d.resolve();
                    }
                };
                return d.promise();

            }());

            $.when(
                procSetting( $('#collapse').is(':hidden') )
            ).done(function() {
                console.log("proc2");
            });
        })
        .fail(function() {
            console.log("ajax fail");
        });

このコードだと$('#collapse')が非表示の場合(つまり閉じているとき)setGrid()より先に
proc2が表示されます。procSettingの処理はshowで終わっているので当然だとは思うので
すが、shown.bs.collapseのハンドラで書いている処理をproc2より先に行いたいのです。

何がしたいかというと
「collapseが開いてなかったら開いてからsetGrid()の処理をしてcollapseを閉じます。そのあとにproc2の処理が行われるようにしたい」
ということなのですがいまいちjavascriptは勉強不足のためうまく動く書き方が導き出せていません。解決方法のヒントがあれば教えて下さい。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

ちょっとDeferredの使い方が間違っているかと思います。
本来procSettingがd.promise()を返し、そのdoneを見るべきです。いまのコードのおかしなところは、クロージャを使うためにreturnがfunctionになってしまっていることです。return d.promise()の前にreturn functionになってますよね?いまのコード的に、あまりクロージャでやる利点がないように見えます。以下のようにコードを変えてみてはいかがでしょう?
(流れのみを見やすくするためいろいろコードは削ってます)

$(function(){
  $.when(function(){
    console.log("ajaxGet");
  }).done(function(){
    var procSetting = function(collesponded){
      var d = $.Deferred();
      if( collapseopened ){
        $('#collapse').bind('shown.bs.collapse',function(e){
          d.resolve();
        });
        $('#collapse').collapse('show');
      }
      else{
        d.resolve();
      }
      return d.promise();
    }
    procSetting(true).done(function(){
      console.log("proc2");
    });
  });
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/13 10:36

    >クロージャを使うためにreturnがfunctionになってしまっていることです
    確かにそうですね。アドバイス通りにするとうまくいくことを確認できました。
    ありがとうございます

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る