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

I don’t know if this is the effects of an update panel或什么,但是我基本上有一个下拉列表,允许用户选择一个项目作为过滤器.选中该项目后,应仅将一个项目带回到网格视图中.也就是说,此特定过滤器最多将带回您要查找的记录.如果用户单击“应用”链接以应用过滤器,则此方法很好. Apply链接的后面是一些服务器端代码(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.”

我同意他的看法,并认为最简单的方法是…我想：很简单,我将有一个下拉菜单的on change事件处理程序,以便在进行选择时会触发click事件.达到此效果的方法：

        $("#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的linkbutton在更新面板中.

但我仍然想,在更改jQuery代码以模拟click事件之前,它位于更新面板中.那么,为什么页面会放慢速度并用这小段代码拖动呢？是从jQuery代码中调用事件,还是在HTML中渲染了可能导致此问题的其他内容？

如果我改回我的代码并强迫用户单击“应用”按钮,那么我们将恢复正常的速度.如果我告诉jQuery模拟单击我的页面的按钮速度变慢,为什么会这样呢？它在做同样的事情,无论用户单击它还是我让jQuery单击它,模拟单击此链接按钮都将调用其服务器端代码方法.

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

我在这里想念什么？

解决方法:

gh,嗯,我找到了我的问题.因为我使用的是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

很好,但是您在这里一定要小心.我将未封装在updatepanel内部的事件扔到endRequest中.结果是灾难性的……至少对我而言.

然后将这些事件附加多次..或基于进行的异步回发的次数.就我而言,正如我正在测试的那样,我在第六或第七次性能开始下降之后就提到过.好吧,那时候我的控件已经与事件联系了很多次了.例如,我的.apply按钮和我的下拉列表都在updatepanel之外.但是我的jQuery代码在文档ready和endRequest中都附加了我的dropdownlist的change事件.

最初的结果是速度非常快,因为它只在文档中可用.但是,当我进行异步回发时,这些事件每次都会被附加.对于n个测试,我将有n个附加事件…就我而言,7的测试在变更事件处理程序上产生7！

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

标签：updatepanel,asp-net,javascript,c,jquery
来源： https://codeday.me/bug/20191120/2040344.html