同步的jQuery $就没有锁定IE浏览器？ [英] synchronous jquery $.ajax without locking IE?
问题描述
花了一点时间去实现这一点，有一个，我觉得作品非常好，在Firefox的一个解决方案，但在IE浏览器中进行测试时发现，使用异步：假导致浏览器被锁定（停止响应和AP $ P $收杆到冻结）的呼叫的持续时间。
基本要求如下。我公司供应了一系列的复选框，用户可以检查。在一个特定的时间，我打电话给我的函数selectedSeriesData（），这是用来相继获得所请求的数据发送请求给我的服务之一。我specificly选择使用同步，这样我可以输出状态消息和警告的浏览器，而该方法被执行。
如。 加载数据的1/3，然后选择加载数据的2/3，加载数据的3/3
当然，现在我知道，这将锁定某些浏览器，以便在IE浏览器的体验，不仅锁定浏览器，但任何消息，我试图显示从来没有得到显示。是否有任何形式的简单DOEVENTS样动作我可以打电话给每个Ajax调用作出后，还是仅仅是重组我的ajax调用的问题。如果是这样的情况下，任何实施意见给我的要求吗？
下面是code，以供参考简化的提取物。
函数selectedSeriesData（）{
变种seriesData = [];
变种索引= 0;
$每个（$（输入[名称='idCheckBox']：选中），函数（）{
VAR ID = $（本）.VAL（）;
$（＃loadingMessage）文本（加载+编号+...）。
$阿贾克斯（{
键入：POST，
异步：假的，
网址：'＆LT;％：loadSeriesDataPath％＆GT;'，
数据类型：JSON，
数据： {
ID：身份证
}，
成功：功能（数据）{
seriesData [指数] =数据;
指数++;
}，
错误：函数（XHR，ajaxOptions，错误）{
$（＃警告UL）追加。（'＆LT;李＆GT;而试图加载数据的A系列通信出错＆LT; /李＆GT;'）;
}
}）;
}
}）;
返回seriesData;
}
我觉得我的问题的最佳答案是...你就错了。我没有任何运气$。当作为建议（也许这是因为我对它的理解），所以想出了以下的答案我自己。
基本上，使用回调来实现一种递归排队。这可能听起来有目共睹你们，但其新的给我，我觉得有经验的jqueryer那里会同意我的实现（请让我知道，如果我这样做的权利！）
而不是通过我的复选框循环，使Ajax请求首先，建立请求的数组。这摆脱了需要从原来的方法返回我的结果，并开始一连串的方法执行evetually导致期望的结果。
函数selectedSeriesData（）{
变种请求= [];
$每个（$（输入[名称='somethingCheckBox']：选中），函数（）{
VAR ID = $（本）.attr（'值'）;
VAR请求= {
ID：ID
};
requests.push（要求）;
}）;
loadRequests（请求）;
}
从请求的数组，开始呼叫loadRequests它初始化一个递归回调实现，从我的服务加载数据。
函数loadRequests（请求）
{
$（＃装载机）显示（）。
变种seriesData = [];
loadRequestAt（请求，0，seriesData）;
}
称为递归方法是loadRequestAt，保持请求的数组的轨迹，一个特定的索引加载此itteration，并且被添加到作为所述方法被调用seriesData。匿名方法成功用于建立我seriesData，错误用于报告错误，并完成最重要的使用开始请求的下一个itteration如果所有的请求都被做了，结果呈现在屏幕上。
函数loadRequestAt（请求，loadAtIndex，seriesData）{
VAR currentRequest =请求[loadAtIndex]
$（＃loadingMessage）文本（加载+ currentRequest.id +...）;
$阿贾克斯（{
键入：POST，
网址：'＆LT;％：loadSeriesDataPath％＆GT;'，
数据类型：JSON，
数据： {
编号：currentRequest.id
}，
成功：功能（数据）{
seriesData.push（数据）;
}，
错误：函数（XHR，ajaxOptions，错误）{
$（＃警告UL）追加。（+ currentRequest.id'＆LT;李＆GT尝试加载通信出错'。＆LT; /李＆GT;'）;
}，
完成：函数（）{
变种nextIndex = loadAtIndex + 1;
如果（nextIndex＆LT; requests.length）{
loadRequestAt（请求，nextIndex，seriesData）;
} 其他 {
$（＃装载机）隐藏（）。
renderResults（seriesData）;
}
}
}）;
}
重要的经验教训。不要使用使用AJAX（异步JavaScript和XML），当异步调用。不要使用提供的逐步实施排队功能匿名回调方法（我敢肯定有这个一个公认的名字，但我不知道它）。希望我的学习步骤帮助别人谁是新的jQuery和Ajax调用。谢谢！
Spent a bit of time trying to achieve this and have a solution that I think works very well in firefox, but when testing in IE discovered that using async: false cause the browser to be locked (stops responding and apprears to have frozen) for the duration of the call.
Requirement basically as follows. I supply a series of check boxes which users may check. At a particular time I call my function 'selectedSeriesData()' which is used send requests to my service one after another getting the requested data. I specificly chose to use sync so that I could output status messages and warnings to the browser while the method is executing.
eg. "Loading data 1/3", then "Loading data 2/3", "Loading data 3/3"
Of course, I now know that this locks certain browsers so the experience in IE not only locks the browser but any messages I tried to display never got shown. Is there any sort of simple doEvents like action I can call after each ajax call has been made, or is it just a matter of restructuring my ajax calls. If that's the case, any implementation advice given my requirement?
Below is a simplified extract of code for reference.
function selectedSeriesData() {
var seriesData = [];
var index = 0;
$.each($("input[name='idCheckBox']:checked"), function () {
var id = $(this).val();
$("#loadingMessage").text("Loading " + id + "...");
$.ajax({
type: 'POST',
async: false,
url: '<%: loadSeriesDataPath %>',
dataType: 'json',
data: {
Id: id
},
success: function (data) {
seriesData[index] = data;
index++;
},
error: function (xhr, ajaxOptions, error) {
$("#warnings ul").append('<li>A communication error occured while attempting to load data for the series.</li>');
}
});
}
});
return seriesData;
}
I think the best answer to my question is... you're doing it wrong. I didn't have any luck with $.when as was suggested (perhaps it was due to my understanding of it), so came up with the following answer myself.
Basically, use callbacks to implement a sort of recursive queuing. This may sound obvious to all you guys, but its new to me, and I think the experienced jqueryer out there would agree with my implementation (please let me know if I'm doing it right!)
Firstly, instead of looping through my checkboxes and making ajax requests, build up an array of requests. This gets rid of the need to return my results from the original method and begins a chain of method execution evetually leading to the desired result.
function selectedSeriesData() {
var requests = [];
$.each($("input[name='somethingCheckBox']:checked"), function () {
var id = $(this).attr('value');
var request = {
id: id
};
requests.push(request);
});
loadRequests(requests);
}
From the array of requests, start call loadRequests which initializes a recursive callback implementation to load data from my service.
function loadRequests(requests)
{
$("#loader").show();
var seriesData = [];
loadRequestAt(requests, 0, seriesData);
}
the recursive method called is loadRequestAt, which keeps track of the array of requests, a specific index to load this itteration, and seriesData that is added to as the method is called. Anon methods Success used to build up my seriesData, Error used to report errors, and Complete most importantly used to begin the next itteration of requests or if all requests have been made, render results to the screen.
function loadRequestAt(requests, loadAtIndex, seriesData) {
var currentRequest = requests[loadAtIndex];
$("#loadingMessage").text("Loading " + currentRequest.id + "...");
$.ajax({
type: 'POST',
url: '<%: loadSeriesDataPath %>',
dataType: 'json',
data: {
Id: currentRequest.id
},
success: function(data) {
seriesData.push(data);
},
error: function(xhr, ajaxOptions, error) {
$("#warnings ul").append('<li>A communication error occured while attempting to load ' + currentRequest.id'.</li>');
},
complete: function() {
var nextIndex = loadAtIndex + 1;
if (nextIndex < requests.length) {
loadRequestAt(requests, nextIndex, seriesData);
} else {
$("#loader").hide();
renderResults(seriesData);
}
}
});
}
Important lessons learned. Do use Asynchronous calls when using AJAX (Asynchronous JavaScript and XML). Do make use of anonymous callback methods provided to implement progressive queueing functionality (I'm sure there is an accepted name for this but I'm not sure of it). Hope my steps in learning helps others who are new to jquery and ajax calls. Thanks!
这篇关于同步的jQuery $就没有锁定IE浏览器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
