在 Jquery 中完成 for 循环后如何触发回调函数? [英] How to fire a callback function after a for-loop is done in Jquery?

问题描述

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

I have two functions that caluclate and adjust the height and width of elements on screen.

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

panelHeight sets the height of target elements to the available screen height, while panelWidth adjusts the width of elements.

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

My problem:
I cannot ensure the second functions (panelWidth) fires AFTER the first function (panelHeight) is done. If the target element is long and has a scrollbar, it will be removed by panelHeight but if this is not done before panelWidth fires, the set width will be off by the space taken up by the scrollbar (17px - still present when the width is calculated).

所以我正在寻找一种仅在另一个函数完成后才触发一个函数的方法. 有点像回调，但我不确定在下面的 for 循环中由谁来解决这个问题:

So I'm looking for a way to fire a function only after another function is done. Sort of like a callback, but I'm not sure who to fiddle this in below for-loop:

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* 循环完成.

So I'm either looping through the overthrow-if-or-else loop and only need to fire panelWidth *AFTER* the loop is finished.

问题:
知道如何摆脱超时并将 panelWidth 函数调用添加到循环末尾吗?我尝试使用 queue，但这也需要 delay(xxx).我也不能在 for 循环内触发 panelWidth .我只需要在高度功能完成后触发一次

Question:
Any idea how to get rid of the timeout and add the panelWidth function call to the end of the loop? I tried with queue, but this also requires a delay(xxx). Also I cannot fire panelWidth inside the for-loop. I need it to trigger once only once the height function is complete

编辑:
这可能吗:

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

如果是这样，我应该把var deferred = Deferred();放在哪里?

If so, where would I have to put the var deferred = Deferred();?

解决方案:
得到它的工作.谢谢大家！这是我的解决方案:

SOLUTION:
Got it to work. Thanks all! Here is my solution:

调用panelHeight时，添加done()处理程序

When calling panelHeight, add done() handler

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

在panelHeight中，声明defer并返回resolved();

Inside panelHeight, declare defer and return resolved();

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

    ... run function

    return deferred.resolve();
    }

推荐答案

这就是 JQuery 的目的 Deferred...

This is the purpose of the 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 事件需要绑定到 dom 调整大小，也许 Javascript resize 事件处理程序会工作.

Edit Since the resolve event needs to be tied to a dom resizing, maybe the Javascript resize event handler would work.

这篇关于在 Jquery 中完成 for 循环后如何触发回调函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！