Javascript 调试 - addEventListeners - 点击事件陷入时间问题

Javascript Debugging - addEventListeners - Click events bogging down time wise performance issues

本文关键字：时间 事件 问题 调试 addEventListeners Javascript      更新时间：2023-09-26

我可以使用一些帮助来调试addEventListeners。

我想要一些关于 - 如何跟踪这些以及他们正在使用的资源的建议。我很确定addEventListeners是我的问题 - 因为 - 我有一个场景 - 当我添加一定数量的这些（超过10个）时，一些点击事件开始花费比平时更长的时间。其他事件不会触发。

使用 Safari 网站站长工具/"时间轴"追踪这些较长的点击事件时间 -我发现诸如"mousdown"（甚至是常规的onclick="类型的事件）之类的事件响应时间从几百毫秒跃升至超过1.5秒。肯定有一个平静。

同样 - 在 FireFox 中 - 在这种情况下，"window.print（）;"无法触发。奇怪的是 - 如果我在"window.print（）;"函数之前放置一个"alert（）"玩笑 - 单击关闭警报的时间圈数 - 足以让"window.print（）;"正常运行。

我假设我的错误与时间管理有关，也许是指数级增长。但我不确定如何最好地调试这些addEventListeners。

我还有许多可搜索的列表，可以在人们搜索时动态创建这些addEventListeners。也许我没有正确卸载它们？据我所知，可能会有1000万个被创造出来。

我会尽力在这里提供一些代码 - 但我真正想学习的是如何：

  • 管理
  • 跟踪
  • 调试

这些添加事件侦听器

当我查看源代码时，我没有看到它们。我在任何浏览器的任何控制台中都没有得到任何错误。看起来 - 一旦你创建了这些 - 就不可能跟踪它们并知道嘿在做什么或不在做什么？

  • 怎么样 - 有没有办法跟踪我有多少运行？
  • 我使用 PHP/MySQL 从数据库中调用主人宠物并存储JavaScript 数组中的值。
  • 然后，我需要创建选项卡来选择每只宠物。（每个选项卡都有一个"X"来删除该选项卡和一个侦听器）

  • 我循环数据并创建选项卡并添加事件侦听器，如下所示：

    。

    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

这似乎很奇怪 - 我有数百个这样的 addEventListener，其中包含页面上的列表、搜索、选项卡和函数。而且一切都表现良好 - 直到您获得超过 10 个这样的选项卡和 addEventListeners，这足以将所有内容都扔到顶部并导致巨大的延迟时间???

以下是我的其他代码，创建也利用addEventListener的动态搜索列表 这些是在搜索函数期间添加的，因为循环了几百个搜索值。这也是在 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);


}

我相信我 - 在这里的某个地方 - 没有妥善管理这些。我相信，通过一些帮助来理解跟踪、管理和调试这些代码的最佳方法 - 我将使用此代码以及未来的代码获得更好的性能。

谢谢。

实际上，在IE 6等旧版浏览器上遇到此问题实际上不需要很多（甚至是简单的）事件处理程序。 要解决这个问题，您需要稍微改变一下方法。创建一个事件处理程序，并将其附加到包含当前为其创建处理程序的所有子级的父 DOM 元素。然后，在单个处理程序中，检查事件的目标并调用您最初想要的代码，在您的情况下，它可能看起来像保存。 此方法还有另一个额外的好处：在父级中添加或删除子项时，无需注册或取消注册任何处理程序。

相关文章：