为什么要告诉jQuery的点击我的链接按钮放慢我的网页了？ [英] Why is telling jQuery to click my link button slowing my page down?
问题描述
<一个href=\"http://stackoverflow.com/questions/31359065/performance-deteriorating-after-async-postback-scrolling-becomes-horrendous\">I不知道这是否是一个更新面板或什么样的影响，但我基本上有一个下拉列表，允许用户选择将项目作为过滤器。当选择了项目应该带回只有一个项目到网格图。这就是这个特定的过滤器将在最带回你正在寻找的记录。如果用户点击了申请链接，应用过滤器能正常工作。在应用环节的背后，是一些服务器端的code（C＃中的ASP.NET Web窗体中的应用程序）。
I don't know if this is the effects of an update panel or what, but I basically have a drop down list that allows a user to select an item as a filter. When the item is selected it should bring back only one item into a grid view. That is this specific filter will at most bring back the record you are looking for. This works fine if the user clicks an "apply" link to apply the filter. Behind the apply link is some server-side code (C# within an ASP.NET Web Forms application).
我们有一个由用户提供的东西请求的效果：
We had a request by a user with something to the effect of:
我为什么要点击应用按钮，如果我在此做出选择
一滴下来过滤器...它应该只是得到了一个记录我
寻找。这可以帮助我，因为我没有点击
应用按钮。
"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."
我同意他的看法，认为什么是做最简单的方法...我想：很简单，我会下拉这样，当做出一个选择，我会触发一个点击的变化对事件处理程序事件。东西这样的效果：
I agreed with him and thought what is the easiest way to do this...I thought: Simple, I will have an on change event handler of the drop down such that when a selection is made I'll trigger a click event. Something to this effect:
$("#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");
}
});
起初这并没有工作，我不知道为什么，但再经过一些严重的谷歌上搜索我改变了这一行：
At first this didn't work, and I couldn't tell why, but then after some serious googling I changed this line:
$(".apply").click();
要这样：
$('.apply')[0].click();
这是伟大的工作......所以我决定来测试它多一些。正如我一直陆续选择一个过滤器值，我注意到页面开始放缓。事实上由第六或第七一次是pretty无法使用。我不知道为什么它的发生，但我怀疑它再次与事实，这与LinkButton的类名。适用是一个更新面板内的事情。
That worked great...so I decided to test it some more. As I kept selecting one filter value after another I noticed the page started to slow down. In fact by the 6th or 7th time it was pretty unusable. I don't know why it's happening, but I suspect again it has to do with the fact that this linkbutton with the class name .apply is inside an update panel.
不过，我心想，这是内部的更新面板之前，我改变了我的jQuery code，模拟点击事件。那么，为什么在网页慢下来，这个小片code的拖累？从jQuery的code渲染的东西在HTML其他可能会导致此调用事件？
But still I thought to myself, it was inside of an update panel before I changed my jQuery code to simulate the click event. So why does the page slow down and drag with this little piece of code? Is calling the event from jQuery code rendering something else in the HTML that could be causing this?
如果我改变我的code回来，强制用户点击应用按钮，然后我们又回到了一个良好的正常速度。为什么如果我告诉jQuery来模拟一下按钮我的网页慢下来？它做同样的事情，这个链接点击按钮的模拟调用它的服务器端code方法用户是否点击它，或者我有jQuery的点击。
If I change my code back and force the user to click the apply button then we are back to a good normal speed. Why is it if I tell jQuery to simulate clicking the button my page slow down? It's doing the same thing, the simulation of the click of this link button is calling its server-side code method whether the user clicks it or I have jQuery click it.
有关现在我不知所措，为什么发生这种情况，因为这个按钮是在两种情况下更新面板，但是当我有jQuery的点击通过 $（'申请'） [0]。点击（）; 页面经过多次尝试减慢。然而，当我有用户只需点击此按钮（不jQuery的单击事件），那么它工作正常？
For now I'm at a loss as to why this is happening because this button is in an update panel in either case, yet when I have jQuery click it via $('.apply')[0].click(); the page slows down after several attempts. Yet when I have the user simply click this button (without the jQuery click event) then it works fine?
我是什么在这里失踪？
推荐答案
呃，好吧，我发现我的问题。因为我使用的UpdatePanel我不得不换我的jQuery code到包括 add_endRequest 。也就是说，你有什么要的效果：
Ugh, well, I found my issue. Because I was using updatepanels I had to wrap my jQuery code to include an add_endRequest. That is, you have something to the effect of:
$(document).ready(function() {
//Some initial event/triggers
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
//Copy of some initial event/triggers
});
});
为什么我用你问endRequest？嗯，因为UpdatePanel的异步回发后基本上扔掉所有的事件，因为在这一点上（更新后）HTML再次，在这一点上渲染为一个更新面板中的任何控制相关的所有事件都抹不去。在这一点上，当然的document.ready（）不跑，所以我必须重新订阅这些事件里面 endRequest 。输入我的问题...
Why do I use the endRequest you ask? Well, because updatepanels basically throw away all your events after an asynchronous postback because the HTML at that point (after an update) is rendered again and at that point all events associated with any control inside an update panel are wiped away. At this point of course document.ready() does not run, so I have to resubscribe to these events inside of endRequest. Enter my issue...
我有一个巨大的大脑放屁，我基本上采取了一切，从字面上看里面的一切文件准备就绪，它复制到 endRequest 。事实上，如果我没有记错，我看了其中指出文章
I had a huge brain fart where I basically took everything, literally everything inside document ready and copied it into endRequest. In fact, if I remember correctly, I read articles which stated
无论你在文件准备简单地复制粘贴到endRequest
Whatever you have in document ready simply copy paste into endRequest
这很好，但你必须要小心这里。我被扔在了未缠在UpdatePanel内到 endRequest 事件。其结果是灾难性的......至少对我来说。
That's fine, but you have to be careful here. I was throwing in events that were not wrapped around inside of an updatepanel into endRequest. The result is disastrous...at least for me.
这些事件将附在然后根据取得异步回发的数量多times..or。对我来说，因为我是测试我提到的第六或第七时间开演后降解。好了，到时候我的对照组被附加了很多次的事件。例如，随着我的。适用按钮我的的DropDownList 是我的的UpdatePanel的两个外。但我的jQuery的code的连接我的的DropDownList 两者文件准备和<$ C $的变化事件C> endRequest 。
These events would be attached then multiple times..or based on the number of asynchronous postbacks made. In my case, as I was testing I mentioned after the 6th or 7th time performance starts degrading. Well, by that time my controls were being attached that many times to events. For instance, my .apply button along with my dropdownlist were both outside of my updatepanel. But my jQuery code was attaching the change event of my dropdownlist in both document ready and endRequest.
结果是最初它是pretty快，因为它只有在文件准备好。但是，当我做异步回发这些事件被连接每次。对于n测试我有n个附加的事件......在我的情况就改变事件处理7产量7测试！
The result is initially it's pretty fast, because it's only in document ready. But as I make asynchronous postbacks these events are being attached every time. For n tests I would have n attached events...in my case the test of 7 yields 7 on change event handlers!
典型的例子，也不要将任何事件处理程序，如jQuery的上（）事件是不是更新面板中的任何控制。否则，你会遇到什么，我跑进这是由于事件正在发生性能较差。
Case in point, do not place any event handlers such as jQuery's on() event for any controls that are NOT inside an update panel. Otherwise you will run into what I ran into which was poor performance as events are happening.
这篇关于为什么要告诉jQuery的点击我的链接按钮放慢我的网页了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
