Error when making multiple ajax calls

Question

I'm trying to read in an array of URLs that contain JSON data. I'm trying to iterate through the array and load in the JSON for each URL. But I'm having issues getting error (Network Error 429 in Firebug) which lead me to believe that it was an issue with sending too many requests. I modified and simplified my code to be as listed in the jsfiddle. I'm currently trying to use setTimeout to delay the ajax calls but I am still getting errors after a certain # of ajax calls.

JSBIN : http://jsfiddle.net/s7s4cx9y/3/

var dataURL = [
    "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001380673/timeline?gameHash=ee3b8fd05dd64784",
    "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001380609/timeline?gameHash=9dd207ff3ebfd598",
    "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001380641/timeline?gameHash=828ef9a4dd73bd08", 
    "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001380241/timeline?gameHash=23c53fb7fed21f53", 
    "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001380327/timeline?gameHash=84db7440d6c8cfed", 
    "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001380474/timeline?gameHash=d90ecc8a74124bcf",
    "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001390143/timeline?gameHash=f8a97528a608655c", 
    "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001390158/timeline?gameHash=05abd4c334651b0d", 
    "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001390159/timeline?gameHash=2bf6f0a9b1e84151", 
    "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001390160/timeline?gameHash=d4005554002839f3", 
    "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001410069/timeline?gameHash=39d2712050cd954a", 
    "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001410081/timeline?gameHash=12a38a55a9d5cf18", 
    "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001410080/timeline?gameHash=46fd67ed4c6dfb68", 
    "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001440041/timeline?gameHash=aeba4cc81f453c31", 
    "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001440036/timeline?gameHash=5debbe8da795a7cf", 
    "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001440042/timeline?gameHash=53a746631e808796", "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001440043/timeline?gameHash=4725b07311676885"
];
function test(url, x)
{
    $.ajax({
            url:url,
            dataType:'jsonp',
            async:false,

           error: function (parsedjson, textStatus, errorThrown) {
               $('body').append(
                    "<b>ERROR</b> </br> parsedJson status: " + parsedjson.status + '</br>' + 
                    "errorStatus: " + textStatus + '</br>' + 
                    "errorThrown: " + errorThrown + '</br></br>' + 
                    "URL: " + url + "<br> iterator: X = " + x + "</br></br>");       
           },
           success : function(data) {
               $('body').append(
                    "<b>SUCCESS</b> </br>" +
                    "URL: " + url + "</br> iterator: X = " + x + "</br></br>"); 
           }
     });
}
for(var x = 0; x < dataURL.length; x++)
{
    var proxyUrl = 'https://jsonp.afeld.me/';
    var url = proxyUrl + '?url=' +     encodeURIComponent(dataURL[x] ) + '&callback=?';
    setTimeout(test(url, x), 10000);
}

The URLs have to be redirected through a proxy script to generate the correct jsonp as referenced in this previous question : Passing JSON from server-side (.NET) to client-side (jQuery)

429 Too Many Requests in short time is recognized as DDoS attack — Gene R, Dec 19 '15 at 17:55
Ajax gives me a 404 error. I figured it had something to do with the rate of requests which is why I added the setTimeout but even with a huge time interval it is still not denying me access. — TaylorM, Dec 19 '15 at 17:57

score 3 · Accepted Answer · answered Dec 19 '15 at 18:08

Try setting async: true at $.ajax() options; wrapping call to setTimeout in an IIFE

for (var x = 0; x < dataURL.length; x++) {
  (function(y) {
    // `y` : `x`
    var proxyUrl = "https://jsonp.afeld.me/";
    var url = proxyUrl + "?url=" 
              + encodeURIComponent(dataURL[y]) + "&callback=?";
    setTimeout(function() {
      test(url, y)
    }, y * 999999);
  }(x))
}

jsfiddle http://jsfiddle.net/s7s4cx9y/4/

Gene R · Answer 2 · 2015-12-19T18:11:33.437

1

Use this way:

setTimeout(function(){ test(url, x) }, 10000);

otherwise your test() method is called immediatly:

setTimeout(test(url, x), 10000);

Update:

for(var x = 0; x < dataURL.length; x++)
{
    .....
    setTimeout(function(){ test(url, x) }, 10000*x);
    or
    setTimeout(function(){ test(url, x) }, 1000*x);
}

edited Dec 19 '15 at 18:11

answered Dec 19 '15 at 17:59

Gene R

3,684
2
17
27

This is just going to make all of the calls in 10 seconds, yes? – Andy Gaskell Dec 19 '15 at 18:01
With that change I still receive errors in the ajax call but now the iterator value (x) is constantly the array length (17). – TaylorM Dec 19 '15 at 18:04
@TaylorM put different time into setTimeout, otherwise your requests will execute in 10 sec alltogether – Gene R Dec 19 '15 at 18:09

Andy Gaskell · Answer 3 · 2015-12-19T18:35:47.450

Here's a recursive solution and fiddle:

var dataURL = [
"https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001380673/timeline?gameHash=ee3b8fd05dd64784",
"https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001380609/timeline?gameHash=9dd207ff3ebfd598",
"https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001380641/timeline?gameHash=828ef9a4dd73bd08"
];

function test(url) {
  return $.ajax({
    url:url,
    dataType:'jsonp',
    error: function (parsedjson, textStatus, errorThrown) {
      $('body').append(
      "<b>ERROR</b> </br> parsedJson status: " + parsedjson.status + '</br>' + 
      "errorStatus: " + textStatus + '</br>' + 
      "errorThrown: " + errorThrown + '</br></br>' + 
      "URL: " + url + "<br></br>");
    },
    success : function(data) {
      $('body').append(
      "<b>SUCCESS</b> </br>" +
      "URL: " + url + "</br></br>"); 
    }
});
}

(function iterateUrls() {
  var proxyUrl = 'https://jsonp.afeld.me/';
  var u = dataURL.shift();
  if(!u) { return; }
  var url = proxyUrl + '?url=' + encodeURIComponent(u) + '&callback=?';
  setTimeout(function() { 
    test(url).then(function() { iterateUrls(); });
  }, 1000);
})();

Super-bonus-edit!:

You don't need setTimeout at all! If you only ever have one request in flight at a time the requests succeed. This will save you a lot of time:

(function iterateUrls() {
  var proxyUrl = 'https://jsonp.afeld.me/';
  var u = dataURL.shift();
  if(!u) { return; }
  var url = proxyUrl + '?url=' + encodeURIComponent(u) + '&callback=?';
  test(url).then(iterateUrls);
})();

You can do some testing to see if you can have more than one request in flight at once.

score 0 · Answer 4 · answered Jun 24 '16 at 20:31

You are accessing the Riot Games API. It sends 429 responses as a rate limiting measure along with a Retry-After header with the time you should wait. It will also send 404 responses for missing matches, including sometimes even for a match that should be there but isn't available for some production / caching reason.

BTW, typical Riot API developer program members are given API keys that they should include on requests. Each key has its own rate limiting.

Error when making multiple ajax calls

4 Answers4