AJAX调用浏览器冻结了位,而它得到响应并执行成功 [英] AJAX call freezes browser for a bit while it gets response and executes success
问题描述
我在做一个AJAX调用我的网络服务器而获取了大量的数据。我表明,旋转,而Ajax调用执行,然后逐渐消失加载图像。
I am doing an AJAX call to my webserver which fetches a lot of data. i show a loading image that spins while the ajax call is executed and then fades away.
的事情,我已经注意到的是,所有的在这个特定呼叫的浏览器将使其无响应约7秒钟。话虽这么说,加载图像不旋转正如我曾计划而获取正在发生。
the thing i have noticed is that all of the browsers on this particular call will make it non-responsive for about 7 seconds. That being said, the loading image is NOT spinning as what i had planned while the fetch was occurring.
我不知道这是否是发生的事情,或者如果周围有办法,在一定意义上造成那里是叉(),所以它1的事情,而我的加载图标仍然旋转。
I did not know if this was something that happens or if there is a way around to, in a sense cause there to be a fork() so that it does 1 thing, while my loading icon still spins.
想法?想法?
下面是code有人想看看它:
below is the code as someone wanted to see it:
$("div.loadingImage").fadeIn(500);//.show();
setTimeout(function(){
$.ajax({
type: "POST",
url: WEBSERVICE_URL + "/getChildrenFromTelTree",
dataType: "json",
async: true,
contentType: "application/json",
data: JSON.stringify({
"pText": parentText,
"pValue": parentValue,
"pr_id": LOGGED_IN_PR_ID,
"query_input": $("#queryInput").val()
}),
success: function (result, textStatus, jqXHR) {
//alert("winning");
//var childNodes = eval(result["getChildrenFromTelTreeResult"]);
if (result.getChildrenFromTelTreeResult == "") {
alert("No Children");
} else {
var childNodes = JSON.parse(result.getChildrenFromTelTreeResult);
var newChild;
//alert('pText: '+parentText+"\npValue: "+parentValue+"\nPorofileID: "+ LOGGED_IN_PR_ID+"\n\nFilter Input; "+$("#queryInput").val() );
//alert(childNodes.length);
for (var i = 0; i < childNodes.length; i++) {
TV.trackChanges();
newChild = new Telerik.Web.UI.RadTreeNode();
newChild.set_text(childNodes[i].pText);
newChild.set_value(childNodes[i].pValue);
//confirmed that newChild is set to ServerSide through debug and get_expandMode();
parentNode.get_nodes().add(newChild);
TV.commitChanges();
var parts = childNodes[i].pValue.split(",");
if (parts[0] != "{fe_id}" && parts[0] != "{un_fe_id}") {
newChild.set_expandMode(Telerik.Web.UI.TreeNodeExpandMode.ServerSide);
}
}
}
//TV.expand();
//recurseStart(TV);
},
error: function (xhr, status, message) {
alert("errrrrror");
}
}).always(function () {
$("div.loadingImage").fadeOut();
});
},500);
我的一个corworker注意到了这个问题,并建议我加的setTimeout(函数(){..},500);但它不解决手头的问题,所以它很可能会被删除。
A corworker of mine noticed this issue, and suggested i add a setTimeout(function(){..},500); but it does not fix the issue at hand, so it will most likely be removed.
推荐答案
由于JavaScript是单线程的,大量的同步处理将挂上事件队列和prevent其他code的执行。你的情况,这是对环这就是锁定浏览器,而它的执行。
你可以尝试是把所有的迭代到事件队列。
Since JavaScript is single threaded, a lot of sync processing will hang up the event queue and prevent other code from executing. In your case, it's the for-loop thats locking up the browser while it's executing.
What you can try is putting all your iterations into your event queue.
for (var i = 0 ; i < childNodes.length ; i = i + 1) {
(function(i) {
setTimeout(function(i) {
// code-here
}, 0)
})(i)
}
这应该空出的处理,而不是强制浏览器来完成他们的一次。自执行的函数有没有建立一个封闭扶住循环计数器我的价值。
This should space out the processing and not force the browser to finish them all at once. The self executing function is there to create a closure to hold on to the value of the loop counter i.
这篇关于AJAX调用浏览器冻结了位,而它得到响应并执行成功的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!