Как запустить функцию обратного вызова после выполнения цикла for в Jquery?

Question

У меня есть две функции, которые рассчитывают и регулируют высоту и ширину элементов на экране.

panelHeight устанавливает высоту целевых элементов на доступную высоту экрана, в то время как panelWidth регулирует ширину элементов.

Моя проблема:
Я не могу гарантировать, что вторые функции (panelWidth) запускаются ПОСЛЕ того, как первая функция (panelHeight) выполнена. Если целевой элемент длинный и имеет полосу прокрутки, он будет удален panelHeight, но если этого не сделать до запуска panelWidth, заданная ширина будет отключена пространством, занимаемым полосой прокрутки (17 пикселей - все еще присутствует, когда ширина равна рассчитано).

Поэтому я ищу способ запустить функцию только после выполнения другой функции. Вроде как обратный вызов, но я не уверен, кто возиться с этим в цикле ниже:

panelHeight: function (from) {
    var self = this,
        o = self.options,
        wrap = $('div:jqmData(wrapper="true").ui-page-active').last(),
        overthrow = wrap.jqmData("scrollmode") == "overthrow" && $('html').hasClass('ui-splitview-mode'),
        blacklist = $('html').hasClass('blacklist'),

        // calculationg toolbars
        // elements
        contents = TARGET_ELEMENT;

    if (overthrow) {
        for ( var i = 0; i < contents.length; i++){
            // calculate values 
            ...
            contents.eq(i).css({    
                        "max-height": setH, 
                        "margin-top": blacklist == true ? glbH + lclH : 0, 
                        "margin-bottom": blacklist == true ? glbF + lclF  : 0
                    })
            }

        } else {

            for ( var i = 0; i < contents.length; i++){
                // calculate values
                ...
                contents.eq(i).css({    
                            "max-height" : "", 
                            "height": o._iPadFixHeight, 
                            "margin-top": blacklist == true ? 
                                parseFloat( lclH.outerHeight() ) : 0, 
                            "margin-bottom": blacklist == true ? 
                                parseFloat( lclF.outerHeight() ) : 0
                        })
                }

            }   
            // USING THIS NOW, WHICH IS NOT NICE                
    window.setTimeout(function(){ self.panelWidth(false ); },65)
    },

Так что я либо зацикливаюсь на цикле overthrow -if-or-else, и мне нужно только запустить panelWidth * AFTER * цикл закончен.

Вопрос:
Любая идея, как избавиться от тайм-аута и добавить вызов функции panelWidth в конце цикла? Я пытался с очередью, но это также требует задержки (ххх). Также я не могу запустить PanelWidth внутри цикла for. Мне нужно, чтобы он срабатывал один раз только после завершения функции высоты

РЕДАКТИРОВАТЬ:
Будет ли это возможно:

// calling my panelHeight function like this: 
self.panelHeight("source").done(function() {
   // call panelWidth:
   self.panelWidth();
   });

Если так, то где я должен был бы поместить var deferred = Deferred ();?

РЕШЕНИЕ:
Получил это на работу. Спасибо всем! Вот мое решение:

При вызове panelHeight добавьте обработчик done()

$(document).on('pagechange.fixedHeight', function() {
    self.panelHeight("pagechange").done( function() {
        self.panelWidth( false ) 
        });
    });

Внутри panelHeight, объявите defer и верните resolved();

panelHeight: function (from) {  
    var deferred = $.Deferred();

    ... run function

    return deferred.resolve();
    }

Answer 1

Это цель отложенного JQuery...

var deferred = $.Deferred();

somethingAsync(function() {
    // callback stuff here

    // now tell the deferred task it's ok to proceed
    deferred.resolve();
}

deferred.done(function() {
    // your finalize code here
});

Редактировать Поскольку событие разрешения должно быть связано с изменением размера, возможно, будет работать обработчик события изменения размера Javascript.