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

Question

I don't know if this is the effects of an update panel或者什么，但我基本上有一个下拉列表，允许用户选择一个项目作为过滤器。选择项目后，它应该只将一个项目带回 GridView 。也就是说，这个特定的过滤器最多会带回您要查找的记录。如果用户单击“应用”链接来应用过滤器，这会很好地工作。应用链接后面是一些服务器端代码(ASP.NET Web 窗体应用程序中的 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."

我同意他的看法，并认为最简单的方法是什么...我想:简单，我将有一个下拉菜单的更改事件处理程序，以便在进行选择时触发点击事件。一些这样的效果:

        $("#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 点击它，模拟这个链接按钮的点击都是调用它的服务器端代码方法。

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

我在这里错过了什么？

Answer 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？好吧，因为更新面板基本上会在异步回发后丢弃所有事件，因为此时(更新后)的 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 的更改事件。

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

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