2

画面上の要素の高さと幅を計算して調整する 2 つの関数があります。

panelHeightはターゲット要素の高さを利用可能な画面の高さに設定し、panelWidthは要素の幅を調整します。

私の問題:最初の関数 ( panelHeight ) が完了した後に、2 番目の関数 ( panelWidth
) が起動 することを保証できません。ターゲット要素が長く、スクロールバーがある場合、それは 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();
    }
4

1 に答える 1

6

これが 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
});

編集解決イベントは dom のサイズ変更に関連付ける必要があるため、Javascript の サイズ変更イベント ハンドラーが機能する可能性があります。

于 2012-06-15T07:37:43.823 に答える