1

addEventListenersのデバッグに役立つヘルプを使用できます。

これらを追跡する方法と、それらが使用しているリソースについてアドバイスをお願いします。私はaddEventListenersが私の問題であることを確信しています - これらの特定の数 (10 以上) を追加すると、いくつかのクリックイベントが通常よりも長くかかり始めるというシナリオがあります。また、他のイベントは発生しません。

Safari Webmaster Tools / "Timeline"を使用してこれらの長いclickevent時間を追跡すると、" mousdown " などのイベント (通常のonclick=""タイプのイベントでさえ) の応答時間が数百ミリ秒から 1.5 秒以上に跳ね上がることがわかります。確かに落ち着きがあります。

同様に - FireFoxでは - 「window.print();」この状況ではトリガーに失敗します。そして奇妙なことに、「 window.print() ;」の前に「 alert()」冗談を入れると 関数 -クリックしてアラートを閉じるまでの時間 - 「window.print();」を許可するには十分です。適切に機能すること。

私のバグは時間管理とおそらく指数関数的な増加に関係していると思います。しかし、これらの addEventListeners を最適にデバッグする方法がわかりません。

また、人が検索すると、これらのaddEventListenersをオンザフライで作成する検索可能なリストもいくつかあります。おそらく私はそれらを適切にアンロードしていませんか？私が知っている限りでは、それらが1000万個作成される可能性があります。

ここでいくつかのコードを提供するために最善を尽くしますが、私が本当に学びたいのは次の方法です。

  • 管理
  • 追跡する
  • デバッグ

これらのaddEventListeners

ソースを表示しても表示されません。どのブラウザーのどのコンソールでも、エラーの方法で何も返されません。これらを作成すると、それらを追跡して、何をしているのか、何をしていないのかを知ることは不可能です。

  • どうですか - 私が実行しているそれらの数を追跡する方法はありますか?
  • PHP/MySQL を使用してデータベースから Owners Pets を呼び出し、その値を JavaScript 配列に格納します。
  • 次に、各ペットを選択するためのタブを作成する必要があります。（各タブには、タブを削除するための「X」と、そのためのリスナーもあります）

  • データをループして、次のようにタブとaddEventListenersを作成します。

    ...

    for(var i=0; i<Pets_Array.length; i++){// Loop Existing and Active Pets Array Tabs

    if(Pets_Array[i]['VISITOR_IDENTITY_DELETED'] != "1"){// if pet not deleted

        // Create Pet Tabbing listeners
        document.getElementById('Visitor_Details_AUTOTAB_'+i).addEventListener("click", function(event){
            event.stopPropagation();
            Pet_Tabbing_Auto_Save = true;
            ID_Of_Pet_Tabbing = this.id;
            Tst_Sv_Comp('Pet_Tabbing');

        },false);


        // Create Pet DeleteX listeners

    <?php //if($ADMIN == true){// Only Admin ?>

            document.getElementById('VISITOR_IDENTITY_TAB_X_BUTTON_'+i).addEventListener("click", function(event){
                event.stopPropagation();
                Delete_Pet(this.id);


            },false);

    <?php //} // Only Admin ?>


        Last_AutoLoaded_Pet = i;

    }// END if pet not deleted

}//END  Loop Existing and Active Pets Array Tabs

奇妙に思えます-ページ上にリスト、検索、タブ、機能を備えたこれらのaddEventListenersが何百もあります。そして、それはすべて正常に動作します-これらのタブを10個以上取得し、すべてを上に投げて巨大な遅延時間を引き起こすのに十分な追加のEventListenersを取得するまで???

addEventListenersも利用する動的検索リストを作成する私の他のコードを次に示します。これらは、検索機能中に数百の検索値がループされるときに追加されます。これは、すべての値を含むリストごとに入力するために、init でも設定されます。いずれにせよ、ボタンに作成される数百の値を持ついくつかのリストがあり、それぞれにaddEventListenersが必要です

.....

// Add dbble clck evnt listener
    document.getElementById(Who_To_Search_BREED_or_VET_CLINIC_G+'_'+key).addEventListener("mousedown", function(event){
        event.stopPropagation();
        $('#Add_'+Who_To_Search_BREED_or_VET_CLINIC_G+'_Button').hide();        
        Handle_Double_Clicks(this.id);
    },false);

また、タブのクリックによって作動する機能内にある多くの画像読み込みリスナーを使用して、ペットのプロフィール画像を読み込みます。

つまり..

Tab_Click_Function(){

    var image = new Image();
    image.src = '../application_images/Owners/'+G_OWNER+'/Pets/'+G_Pet_Selected+'/main/'+Main_Profile_Image_For_Pets_Array_G["PET_"+G_Pet_Selected];// Visitor_Profile_Picture image;

  image.addEventListener("load", function(){

   document.getElementById('PRINT_CAMPER_PROFILE_PHOTO').src = image.src;// show image now that is has loaded into the cache

  }, false);




}

私は、ここのどこかで、これらを適切に管理していないと思います。これらを追跡、管理、およびデバッグするための最良の方法を理解する助けがあれば、このコードと将来のコードでパフォーマンスが向上すると思います。

ありがとうございました。

4

1 に答える 1

0

IE 6 などの古いブラウザでは、実際にはそれほど多くの (単純な) イベント ハンドラを使用する必要はありません。これを解決するには、アプローチを少し変更する必要があります。1 つのイベント ハンドラーを作成し、現在ハンドラーを作成しているすべての子を保持する親 DOM 要素にアタッチします。次に、その単一のハンドラーで、イベントのターゲットを調べて、最初に意図したコードを呼び出します。この場合、保存のように見えるかもしれません。このアプローチには、別の追加の利点もあります。子を親に追加または削除するときに、ハンドラーを登録または登録解除する必要はありません。

于 2013-09-06T02:58:05.260 に答える