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

これはちょっと試しに書いたコードですが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は勉強不足のためうまく動く書き方が導き出せていません。解決方法のヒントがあれば教えて下さい。

行動規範の内容に同意します

回答1件

ベストアンサー

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

Javascript
1$(function(){
2  $.when(function(){
3    console.log("ajaxGet");
4  }).done(function(){
5    var procSetting = function(collesponded){
6      var d = $.Deferred();
7      if( collapseopened ){
8        $('#collapse').bind('shown.bs.collapse',function(e){
9          d.resolve();
10        });
11        $('#collapse').collapse('show');
12      }
13      else{
14        d.resolve();
15      }
16      return d.promise();
17    }
18    procSetting(true).done(function(){
19      console.log("proc2");
20    });
21  });
22});