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

问题描述

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

panelHeight 设置目标元素的高度

我遇到的问题：可以调整元素的宽度。 $ b在第一个函数（ panelHeight ）完成后，我无法确保第二个函数（ panelWidth ）触发。如果目标元素很长并且有滚动条，则它会被 panelHeight 删除，但如果在 panelWidth 之前未完成，设置的宽度将被空格关闭由滚动条占用（17px - 计算宽度时仍然存在）。

所以我在寻找一种方法， 类似回调的类型，但我不确定在下面的for循环中如何解决这个问题：

  panelHeight：function（from）{
 var self = this，
o = self.options，
 wrap = $（'div：jqmData（wrapper =true）。 -page-active'）。last（），
 overthrow = wrap.jqmData（scrollmode）==overthrow&& $（'html'）。hasClass（'ui-splitview-mode'），
 blacklist = $（'html'）。hasClass（'blacklist'），
 
 // calculatorg 
 // elements 
 contents = TARGET_ELEMENT; 
 
 if（overthrow）{
 for（var i = 0; i< contents.length; i ++）{
 //计算值
 ... 
 contents.eq（i）。css（{
max-height：setH，
margin-top：blacklist == true？glbH + lclH：0，
 margin-bottom：blacklist == true？glbF + lclF：0 
}）
} 
 
} else {
 
 for = 0; i  //计算值
 ... 
 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 
}）
} 
 
} 
 //使用现在，这是不NICE 
 window.setTimeout（function（）{self.panelWidth（false）; }，65）
}，
  

所以我要循环遍历if -or-else循环，并且只需要激活 panelWidth * *循环完成。

问题：

任何想法如何摆脱超时并将 panelWidth 函数调用添加到循环结束处？我尝试使用队列，但这也需要一个延迟（xxx）。我也不能在for循环中触发panelWidth。我需要它只在高度函数完成后触发一次

编辑：

这是可能的： / p>

  //调用我的panelHeight函数像这样：
 self.panelHeight（source）。 {
 // call panelWidth：
 self.panelWidth（）; 
}）; 
  

如果是这样，我必须将 var deferred = Deferred / em>？

解决方案：

让它工作。谢谢大家！这是我的解决方案：

调用panelHeight 时，添加done（）处理程序

  $（document）.on（'pagechange.fixedHeight'，function（）{
 self.panelHeight（pagechange）。 self.panelWidth（false）
}）; 
}）; 
 

在 panelHeight 内，声明延迟并返回已解决（）;

  panelHeight：function（from）{
 var deferred = $ .Deferred 
 
 ...运行函数
 
 return deferred.resolve（）; 
} 
  




解决方案

JQuery 延迟 ...

  var deferred = $ .Deferred（）; 
 
 somethingAsync（function（）{
 //回调的东西在这里
 
 //现在告诉deferred任务它可以继续
 deferred.resolve ）; 
} 
 
 deferred.done（function（）{
 //您的最终代码在这里
}）; 
  
 
 
 
  
 编辑 
由于解决绑定到dom调整大小，也许Javascript 调整大小事件处理程序将工作。
  
 
I have two functions that caluclate and adjust the height and width of elements on screen.

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

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).

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)
    },
So I'm either looping through the overthrow-if-or-else loop and only need to fire panelWidth *AFTER* the loop is finished.

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

EDIT:

Would this be possible:
// calling my panelHeight function like this: 
self.panelHeight("source").done(function() {
   // call panelWidth:
   self.panelWidth();
   });
If so, where would I have to put the var deferred = Deferred();?

SOLUTION:

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

When calling panelHeight, add done() handler
$(document).on('pagechange.fixedHeight', function() {
    self.panelHeight("pagechange").done( function() {
        self.panelWidth( false ) 
        });
    });
Inside panelHeight, declare defer and return resolved();
panelHeight: function (from) {  
    var deferred = $.Deferred();

    ... run function

    return deferred.resolve();
    }

解决方案
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
});

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


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