我需要在我的 JavaScript/jQuery 中执行多个功能,但我想避免阻塞 UI。
AJAX 不是一个可行的解决方案,因为应用程序的性质,这些功能很容易达到数千个。异步执行此操作会杀死浏览器。
所以,我需要一些方法来链接浏览器需要处理的函数,并且只在第一个函数完成后才发送下一个函数。
算法是这样的
For steps from 2 to 15
HTTP:GET amount of items for current step (ranges somewhere from a couple of hundred to multiple thousands)
For every item, HTTP:GET the results
如您所见,我有两个 GET-request-“链”我需要以某种方式管理...特别是最内层的循环几乎立即使浏览器崩溃,如果它是异步完成的 - 但我仍然希望用户能够操作页面,所以纯(阻塞)同步方式行不通。
最佳答案
您可以轻松地异步执行此操作,而无需一次触发所有请求。您需要做的就是管理队列。为了清楚起见,以下是伪代码。它很容易转化为真正的 AJAX 请求:
// Basic structure of the request queue. It's a list of objects
// that defines ajax requests:
var request_queue = [{
url : "some/path",
callback : function_to_process_the_data
}];
// This function implements the main loop.
// It looks recursive but is not because each function
// call happens in an event handler:
function process_request_queue () {
// If we have anything in the queue, do an ajax call.
// Otherwise do nothing and let the loop end.
if (request_queue.length) {
// Get one request from the queue. We can either
// shift or pop depending on weather you prefer
// depth first or breadth first processing:
var req = request_queue.pop();
ajax(req.url,function(result){
req.callback(result);
// At the end of the ajax request process
// the queue again:
process_request_queue();
}
}
}
// Now get the ball rolling:
process_request_queue();
所以基本上我们将 ajax 调用本身变成了一个伪循环。它基本上是递归完成的经典延续传递编程风格。
在您的情况下,请求的示例是:
request_queue.push({
url : "path/to/OUTER/request",
callback : function (result) {
// You mentioned that the result of the OUTER request
// should trigger another round of INNER requests.
// To do this simply add the INNER requests to the queue:
request_queue.push({
url : result.inner_url,
callback : function_to_handle_inner_request
});
}
});
这非常灵活,因为您不仅可以选择处理请求是广度优先还是深度优先(shift vs pop)。但是您也可以使用 splice 将内容添加到队列的中间,或者使用 unshift vs push 将请求放在队列的头部以获得高优先级请求。
您还可以通过在每个循环中弹出多个请求来增加同时请求的数量。请确保每个循环仅调用一次 process_request_queue
以避免同时请求呈指数增长:
// Handling two simultaneous request channels:
function process_request_queue () {
if (request_queue.length) {
var req = request_queue.pop();
ajax(req.url,function(result){
req.callback(result);
// Best to loop on the first request.
// The second request below may never fire
// if the queue runs out of requests.
process_request_queue();
}
}
if (request_queue.length) {
var req = request_queue.pop();
ajax(req.url,function(result){
req.callback(result);
// DON'T CALL process_request_queue here
// We only want to call it once per "loop"
// otherwise the "loop" would grow into a "tree"
}
}
}
关于javascript - 没有 UI block 的处理功能链,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13250746/