为什么告诉 jQuery 点击我的链接按钮会减慢我的页面速度？答案

【问题标题】：Why is telling jQuery to click my link button slowing my page down?为什么告诉 jQuery 点击我的链接按钮会减慢我的页面速度？
【发布时间】：2023-03-14 05:06:01
【问题描述】：

I don't know if this is the effects of an update panel 或什么，但我基本上有一个下拉列表，允许用户选择一个项目作为过滤器。当项目被选中时，它应该只将一个项目带回网格视图。也就是说，这个特定的过滤器最多会带回您正在寻找的记录。如果用户单击“应用”链接以应用过滤器，这将正常工作。应用链接后面是一些服务器端代码（ASP.NET Web 窗体应用程序中的 C#）。

我们收到了一位用户的请求，内容如下：

"如果我在此进行选择，为什么我必须单击应用按钮一个下拉过滤器......它应该只是得到我的一条记录寻找。这对我有帮助，因为我不必单击 “应用”按钮。”

我同意他的观点并认为最简单的方法是什么...我想：简单，我将有一个下拉的 on change 事件处理程序，这样当做出选择时我会触发点击事件。大意是这样的：

        $("#MainContent_ddlCompany").on("change", function() {
            var companyId = $("#MainContent_ddlCompany").val();
            $("#MainContent_hdnCompanyValue").val(companyId);
            $("#<%=ddlCompany.ClientID %>").trigger("chosen:updated");

            if (companyId.length > 0) {
                $(".apply").click();
                $(".apply").removeClass("applyButton");
                $(".apply").addClass("resetButton");
            } else {
                //cleared selection of a company
                $(".apply").removeClass("resetButton");
                $(".apply").addClass("applyButton");
            }
        });

起初这不起作用，我不知道为什么，但经过一番认真的谷歌搜索后，我改变了这一行：

$(".apply").click();

到这里：

$('.apply')[0].click();

效果很好……所以我决定再测试一下。当我不断选择一个又一个过滤器值时，我注意到页面开始变慢。事实上，到第 6 次或第 7 次时，它已经完全无法使用了。我不知道为什么会这样，但我再次怀疑这与这个类名为 .apply 的链接按钮位于更新面板内这一事实有关。

但我还是想，在我更改我的 jQuery 代码以模拟单击事件之前，它位于更新面板中。那么为什么页面会因为这段小代码而变慢和拖拽呢？是否从 jQuery 代码调用事件，在 HTML 中呈现可能导致此问题的其他内容？

如果我改回我的代码并强制用户单击应用按钮，那么我们将恢复正常速度。如果我告诉 jQuery 模拟点击按钮我的页面会变慢，为什么会这样？也是一样的，这个链接按钮点击的模拟是调用它的服务端代码方法，不管是用户点击还是我让jQuery点击。

现在我不知道为什么会发生这种情况，因为无论哪种情况，这个按钮都在更新面板中，但是当我有 jQuery 通过$('.apply')[0].click(); 单击它时，页面在几次尝试后变慢了。然而，当我让用户简单地单击此按钮（没有 jQuery 单击事件）时，它可以正常工作吗？

我在这里错过了什么？

【问题讨论】：

试试 trigger(): $('.apply')[0].trigger('click') .
@HenriS。 - 这有什么关系？
@HenriS。 - 更改为您提到的$('.apply')[0].trigger('click'); 现在什么都不做，没有事件没有数据Uncaught TypeError: $(...)[0].trigger is not a function...我的问题不是它没有撤回我需要的数据。我的问题是页面速度发生了什么变化。
检查您的资源，例如 firebug。也许，这个过程不会停止？您使用类 apply 对所有元素执行所有操作。那效率不高。最好将 id (#) 用于唯一元素。
我明白你在说什么。我想知道更新面板是否以某种方式导致应用按钮的多个实例存在于 dom 上，但不可见。因此，手动单击单个按钮会触发单个事件，而调用整个类单击可能会导致单击在“.apply”的许多实例上触发。我想值得检查 $(".apply") 的长度。希望是 1。直觉说这是一个事件堆栈泄漏。这是一个棘手的问题。

标签： javascript c# jquery asp.net updatepanel

【解决方案1】：

呃，好吧，我发现了我的问题。因为我使用的是更新面板，所以我必须包装我的 jQuery 代码以包含 add_endRequest。也就是说，您有以下效果：

$(document).ready(function() {

     //Some initial event/triggers

     var prm = Sys.WebForms.PageRequestManager.getInstance();
     prm.add_endRequest(function () {
         //Copy of some initial event/triggers
     });
});

我为什么要使用你问的 endRequest？好吧，因为 updatepanels 在异步回发之后基本上会丢弃所有事件，因为此时（更新之后）的 HTML 会再次呈现，并且此时与更新面板内的任何控件相关联的所有事件都将被擦除。此时document.ready() 当然没有运行，所以我必须在endRequest 中重新订阅这些事件。输入我的问题...

我脑子里放了一个大屁，我基本上把所有东西都拿走了，文件里面的所有东西都准备好了，然后复制到endRequest。其实，如果我没记错的话，我看过的文章是这样写的

无论您在文档中准备了什么，只需将粘贴复制到 endRequest 中

没关系，但你必须在这里小心。我将未包含在更新面板内的事件投入到endRequest 中。结果是灾难性的……至少对我而言。

这些事件将被附加多次..或基于异步回发的数量。就我而言，正如我在测试时提到的，在第 6 次或第 7 次性能开始下降之后。好吧，到那时，我的控件已多次附加到事件上。例如，我的.apply 按钮和我的dropdownlist 都在我的updatepanel 之外。但是我的 jQuery 代码在document ready 和endRequest 中都附加了我的dropdownlist 的更改事件。

结果最初是相当快的，因为它只在document ready 中。但是当我进行异步回发时，每次都会附加这些事件。对于 n 个测试，我将有 n 个附加事件...在我的情况下，7 的测试在更改事件处理程序上产生 7！

例如，不要为不在更新面板内的任何控件放置任何事件处理程序，例如 jQuery 的 on() 事件。否则，您将遇到我遇到的事件发生时性能不佳的情况。

【讨论】：