为什么告诉 jQuery 单击我的 link 按钮会减慢我的页面速度？

Question

或什么，但我基本上有一个下拉列表，允许用户 select 一个项目作为过滤器。当项目被 selected 时，它应该只将一个项目带回网格视图。也就是说，这个特定的过滤器最多会带回您要查找的记录。如果用户单击 "apply" link 以应用过滤器，则此方法工作正常。 apply link 背后是一些服务器端代码（ASP.NET Web Forms 应用程序中的 C#）。

我们收到了一位用户的请求，其效果如下：

"Why do I have to click the apply button if I make a selection in this one drop down filter...it should simply get that one record I am searching for. This helps me because I don't have to click the "Apply" button."

我同意他的看法，并认为最简单的方法是什么...我想：简单，我将有一个下拉菜单的更改事件处理程序，这样当 selection 是made 我会触发点击事件。达到这个效果：

        $("#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();

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

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

如果我改回我的代码并强制用户单击“应用”按钮，那么我们就会恢复到正常的正常速度。为什么如果我告诉 jQuery 模拟点击按钮我的页面变慢了？它在做同样的事情，这个 link 按钮的点击模拟是调用它的服务器端代码方法，无论是用户点击它还是我 jQuery 点击它。

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

我在这里错过了什么？

Answer 1

呃，好吧，我发现了我的问题。因为我使用的是 updatepanels，所以我不得不包装我的 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 中。事实上，如果我没记错的话，我看过文章

Whatever you have in document ready simply copy paste into endRequest

没关系，但你必须要小心。我将未包含在更新面板内部的事件放入 endRequest。结果是灾难性的……至少对我来说是这样。

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

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

例如，不要为不在更新面板内的任何控件放置任何事件处理程序，例如 jQuery 的 on() 事件。否则你会运行进入我运行的状态，在事件发生时表现不佳。

为什么告诉 jQuery 单击我的 link 按钮会减慢我的页面速度？

Why is telling jQuery to click my link button slowing my page down?

javascript

c#

jquery

asp.net

updatepanel