1

I have a requirement where i need to fetch around 50-100 urls using Ajax request and a loop. This is working but, Firefox goes unresponsive and freezes. Is there a way i can implement "go to next url when 1st one completed". Like when - then in jquery or something like that. 

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);
     }
  });
}

I will also like to see if we can push, at least 2 URLs together to speed up.

Update :

Reviewed all the solution given below, but nothing worked. Now i am more exicted and looking for a solution which can run 'n' number of AJAX calls without any crash or un- responsiveness

user3471169
  • 69
  • 2
  • 8

4 Answers4

0

If you must do this, you can chain your AJAX calls using jQuery deferred's then: http://api.jquery.com/deferred.then/. Also make things easier with a helper 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]));
  }
};
joeltine
  • 1,610
  • 17
  • 23
  • I'm not sure what you mean. That's the code. Just adapt it to what you already have. – joeltine Aug 09 '14 at 13:04
  • Would is be possible to fiddle this with some example URls – user3471169 Aug 09 '14 at 13:05
  • Just populate the "urls" array with your URIs, and fill in the same $.ajax options you're using above. – joeltine Aug 09 '14 at 13:06
  • Where will be the ajax request module go, after the url array ? – user3471169 Aug 09 '14 at 13:15
  • Hey Joeltine, thanks for you time..I was bit confused with the code. May you please put a fiddle example ? – user3471169 Aug 09 '14 at 15:28
  • 1
    Here: http://jsfiddle.net/fmfjko5z/. Note "/echo/html" is a special URL for jsfiddle demos to mock an AJAX call. Also, I basically wrote 99.9% of the code for you. You gotta learn to read a little more and experiment. Documentation is your friend. – joeltine Aug 09 '14 at 16:23
0

You must use web workers for performing an expensive task without interrupting the user interface.

If you want knowledge about workers, visit this : http://www.html5rocks.com/en/tutorials/workers/basics/

If you just want to use them without understanding, you might use this : http://www.w3schools.com/html/html5_webworkers.asp

Deblaton Jean-Philippe
  • 11,188
  • 3
  • 49
  • 66
0

You can manage the loop in such a way that it calls ajax request after getting the response for 2 previously sent requests.

$(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);
});

Revised code. and here is the fiddle

Check the requests in console for better understanding.

Rupali
  • 1,068
  • 1
  • 12
  • 18
0

Or you can call the ajax function like this:

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);
            }
        }
    });
}

UPDATE

Updated the answer and here is a JSFiddle demo:

JSFiddle

SuperAzeem
  • 157
  • 1
  • 11