jquery中的多个Ajax请求会冻结浏览器

Muliple Ajax request in jquery freezes browser

本文关键字：请求 冻结 浏览器 Ajax jquery      更新时间：2023-09-26

我有一个要求，我需要使用Ajax请求和循环获取大约50-100个url。这是工作，但火狐没有响应，并冻结。有一种方法，我可以实现"去下一个url时，第一个完成"。比如在jquery中。

data = [url1, url2, url3, url4, url5, url6, ............]
for(i=0; i < 50; i++){
  $.ajax({
     async: false,
     type: 'GET',
     url: data[i],
     dataType: 'json',
     success: function(data){   
        alert(data);
     }
  });
}

我也想看看我们是否可以推，至少2个网址在一起，以加快。

Update:

回顾了下面给出的所有解决方案，但都不起作用。现在我更兴奋，并寻找一个解决方案，可以运行'n'次AJAX调用没有任何崩溃或无响应

你必须使用web worker在不中断用户界面的情况下执行昂贵的任务。

如果你想了解有关工人的知识，请访问:http://www.html5rocks.com/en/tutorials/workers/basics/

如果你只是想在不理解的情况下使用它们，你可以这样使用:http://www.w3schools.com/html/html5_webworkers.asp

如果必须这样做，您可以使用jQuery deferred的链接AJAX调用:http://api.jquery.com/deferred.then/。还可以使用帮助器fn:

使事情变得更简单
var urls = [url1, url2, ....];
function callAjax(url) {
  return function() {
    return $.ajax({url: ...});
  }
};
for (var i = 0; i < urls.length; i+=2) {
  var dfd = callAjax(urls[i])();
  if(urls[i+1]) {
    dfd.then(callAjax(urls[i+1]));
  }
};

或者您可以像这样调用ajax函数:

urlsArray = ['/echo/html/', '/echo/html/', '/echo/html/'];
arrayIndex = 0;
doAjax(arrayIndex);      
function doAjax(arrayIndex) {
    var urlCount = arrayIndex + 1;
    var theURL = urlsArray[arrayIndex];
    alert(urlCount + ", Start AJAXing the url: " + theURL);
    $.ajax({
        type: 'GET',
        url: theURL,
        dataType: 'json',
        success: function (data) {
            alert(urlCount + ", Done AJAXing the url: " + theURL);
            if (arrayIndex < urlsArray.length - 1) {
                arrayIndex += 1;
                doAjax(arrayIndex);
            }
        }
    });
}

更新了答案，这里是一个JSFiddle演示:

JSFiddle

你可以用这样一种方式来管理循环，它在获得之前发送的2个请求的响应后调用ajax请求。

$(document).ready(function() {
    var dataUrl = ['1','2','3','4','5','6','7'];
    var completedRequest = 0;
    function getResults(start) {
        for(i=start; i < start+2; i++) {
            if(typeof (dataUrl[i]) != 'undefined') {
                $.ajax({
                    url: dataUrl[i],
                    complete: function(data) {
                        completedRequest ++;
                        if(completedRequest == 2 && (start+2) < dataUrl.length) {
                            getResults(start+2);
                            completedRequest = 0;
                        }   
                    }
                });
            }
        }
        completedRequest = 0;
     }
    //Initiate first request
    getResults(0);
});

修改代码。这是小提琴

在控制台中检查请求以便更好地理解。

相关文章：