javascript - 在 Jquery 中完成 for 循环后如何触发回调函数？

Question

我有两个函数可以计算和调整屏幕上元素的高度和宽度。

panelHeight 将目标元素的高度设置为可用的屏幕高度，而 panelWidth 调整元素的宽度。

我的问题:
我无法确保第二个函数 (panelWidth) 在第一个函数 (panelHeight) 完成后触发。如果目标元素很长并且有一个滚动条，它将被 panelHeight 移除，但如果在 panelWidth 触发之前没有这样做，设置的宽度将被空格偏移被滚动条占据(17px - 计算宽度时仍然存在)。

所以我正在寻找一种仅在另一个函数完成后才触发一个函数的方法。有点像回调，但我不确定谁可以在下面的 for 循环中摆弄这个:

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 函数调用添加到循环末尾吗？我尝试使用queue，但这也需要一个delay(xxx)。此外，我无法在 for 循环内触发 panelWidth。我只需要在高度函数完成后触发一次

编辑:
这是否可能:

// 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 的目的 Deferred ...

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
});

编辑 由于 resolve 事件需要绑定(bind)到 dom 大小调整，可能是 Javascript resize事件处理程序将起作用。