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は勉強不足のためうまく動く書き方が導き出せていません。解決方法のヒントがあれば教えて下さい。