2

私は、モバイル デバイスでは非常に遅いコード スニペットに取り組んでいます。

Jquery Mobile で約 40 個の入力要素 (ボタン) を持つエントリ フォームがあります。Jquery Mobile では、これは次のことを意味します。

<div class="ui-btn" data-disabled="false">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">Button</span>
    </span>
    <input type="button" value="Button" class="ui-btn-hidden" data-disabled="false">
</div>

input通常、すべての PC ブラウザーで正常に動作する にバインドするだけで済みますが、モバイルに切り替えて入力要素の数が増えると、ボタンが機能しなくなります。

ui-btn回避策として、次のように最も近い にバインドしています。

el.jqmData('bound', true )
    .find('input')
    .closest('.ui-btn')
        .on('vclick', function(){
            // do stuff
        });

少なくとも要素をクリック可能にしますが、それでも非常に遅いです。

私は、ネイティブ Javascript メソッドjsPerfと比較する例を見てきました (ここのように)。パフォーマンスの差が 1:10 であると仮定すると (デスクトップからモバイルに切り替える場合のように、「最も近い」呼び出しが速度を低下させていると確信しています。closest

私の質問:連鎖呼び出しをネイティブ Javascript メソッド
に置き換える方法はありますか? closestもしそうなら、これはどのように見えますか？

編集
問題の機能を引き出しました。これは私がやっていることです：

// this gets called once for the size entry box 
// sizeEntryBox is the wrapper for $('sizeChart'), which contains the 60 inputs
addSizeHandlers = function( el ){
    el.jqmData('boundStyle', true)
            .find('.sizeChart')
            .on('vclick', '.entry .ui-btn', function(){

                // since I'm listening for .ui-btn I need to get the child input again                
                var qty = $( this ).find('input.qtyInput'),
                    // user can add +1/+2/+4
                    howMany = qty.closest('.ui-collapsible').find('.buttonBar input[name="radio_add"]:checked').val(),
                    qid = qty.attr('id').replace( /qty/, "" );

                // a button may display a preset qty, clicking once replaces this with
                // +1/+2/+4, clicking again adds +1/+2/+4
                if ( qty.jqmData('flag') === false  ){
                    qty.jqmData('flag',true)
                    newVal = parseFloat( howMany );
                    // set new value, add red borders
                    qty.val( howMany ).prev('.ui-btn-inner').addClass("brR").find('.ui-btn-text').html( howMany );
                    $('input[name=menge'+qid+']').val( howMany );
                } else { 
                    newVal = parseFloat( qty.val() ) + parseFloat( howMany );
                    qty.val( newVal ).prev('.ui-btn-inner').addClass("brR").find('.ui-btn-text').html( newVal );
                    $('input[name=menge'+qid+']').val( newVal );
                }
            });
        },

だから私はすでにチャート全体にバインドし、ボタンに委譲しています。それでも、これはモバイルデバイスでは永遠にかかるため、一部のパフォーマンスドレインは誰かの目にジャンプします, 私に知らせてください.

再度、感謝します！

4

1 に答える 1

3

イベント委任を使用し、入力ごとに 1 つのクリック イベントではなく、すべての入力に対して 1 つのクリック イベントのみを設定することをお勧めします。

詳細については、jQuery .on() ドキュメントの委譲イベントを参照してください。コードは次のようになります。

$(myForm).on("vclick", "input.ui-btn-hidden", function(event){...});

またはdivにバインドする場合：

$(myForm).on("vclick", "div.ui-btn", function(event){...});
于 2012-11-18T19:59:47.993 に答える