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

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

本文关键字：我的 速度 链接 jQuery 为什么 按钮      更新时间：2023-09-26

我不知道这是否是更新面板的效果，但我基本上有一个下拉列表，允许用户选择一个项目作为过滤器。当项目被选中时，它应该只在网格视图中带回一个项目。也就是说，这个特定的过滤器最多只能带回您正在寻找的记录。如果用户单击"apply"链接来应用过滤器，则可以正常工作。在apply链接的后面是一些服务器端代码(ASP中的c#)。. NET Web Forms应用程序)。

我们有一个用户的请求，其效果是:

"为什么我必须点击应用按钮，如果我在这个选择一个下拉过滤器…它应该只是得到一个记录，我是寻找。这对我很有帮助，因为我不需要点击"应用"按钮。"

我同意他的观点，并认为最简单的方法是……我想:很简单，我将有一个下拉菜单的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();

效果很好…所以我决定再测试一下。当我不停地选择一个又一个过滤器值时，我注意到页面开始变慢了。事实上，到第六次或第七次的时候，它已经无法使用了。我不知道为什么会发生这种情况，但我怀疑这与这个链接按钮与类名。apply是在一个更新面板。

但是我还是想，在我改变jQuery代码来模拟点击事件之前，它是在一个更新面板内。那么，为什么这一小段代码会使页面变慢并拖拽呢?从jQuery代码调用事件渲染的其他东西在HTML中，可能会导致这一点?

如果我改变我的代码回来，强迫用户点击应用按钮，然后我们回到一个良好的正常速度。为什么如果我告诉jQuery模拟点击按钮，我的页面变慢了?它做同样的事情，这个链接按钮点击的模拟调用它的服务器端代码方法不管用户是点击它还是我用jQuery点击它

现在我在一个损失，为什么这会发生，因为这个按钮是在一个更新面板在任何情况下，但当我有jQuery通过$('.apply')[0].click();点击它的页面减慢几次尝试后。然而，当我让用户简单地点击这个按钮(没有jQuery点击事件)，然后它工作良好吗?

我在这里错过了什么?

啊，好吧，我找到我的问题了。因为我使用的是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。事实上，如果我没记错的话，我读过一些文章，上面写着

无论文档中有什么，只需复制粘贴到endRequest

那很好，但是你在这里要小心。我扔在事件没有包裹在一个更新面板到endRequest内部。结果是灾难性的。至少对我来说是这样。

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

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

例如，不要为任何不在更新面板内的控件放置任何事件处理程序，例如jQuery的on()事件。否则，当事件发生时，您将遇到我遇到的糟糕的性能。
相关文章：