AJAX Requests are slow, can't find solution on other pages

Question

I have recently started using ajax requests. I have the request working but it takes multiple seconds to load.

Code-

var x = 0;
function makeTR(){
    var appendObject = "<tr>";
    for(var i = 0; i < 3; i++){
        $.ajax({
            async: false,
            type: 'GET',
            url: domain + Players[x] + domain2, 
            success: function(data) {
                appendObject = appendObject + "<td>" + makeTD(data.player, data.rank, data.guild_rank, data.fame, data.last_seen) + "</td>";
                x++;
            }
        });
    }
    appendObject = appendObject + "</tr>";
    return appendObject;
}

If you need anymore code I will give it to you, this is the only part where there is any real code though.

Sorry if there is another post out there, I looked for a while.

Thanks in advance!

`async: false` is the reason. There are better alternatives. `async: false` is never recommended. — Sebastian Simon, Aug 01 '16 at 02:45
Whenever it is off, it never loads the acctual data, I tried looking up better ways to wait for it to load, but most were just doing `.done(function(){.` And that wasn't working very well — Wverhe2, Aug 01 '16 at 02:48
`it never loads the acctual data` - it does, just not synchronously - using asynchronous code above you'd need to be careful because the three requests may not necessarily finish in the order expected either - learn and embrace asynchronous code — Jaromanda X, Aug 01 '16 at 03:20
You are doing 3 ajax calls instead of that do it once,get all your data and imporve the quality of ur API in the backend — Vinayak Shedgeri, Aug 01 '16 at 06:24
switch `async` to `true` (or remove) and try using `promises` to be sure that it return any data. — lukaszkups, Aug 01 '16 at 06:59
Running something async does not "speed it up". It simply releases the UI thread to continue processing, deffering the callback until another time. By setting async:false your not releasing the UI thread so this runs totally synchonously. Removing the asyn:false may help but ultimately what ever is happening on the server **will take the same amount of time** regardless of wether you call it synchronously or asynchronously — Liam, Aug 01 '16 at 08:40
TBH, why run this multiple times at all? Get the server side code to build the entire TR and send it back in one call. This will be much more efficent than what you have now — Liam, Aug 01 '16 at 08:43
I don't know much about the API stuff, it is a public API not mine. — Wverhe2, Aug 01 '16 at 13:24

lordvlad · Answer 1 · 2016-08-01T08:24:17.910

As noted in a comment, your code is slow, because it performs the ajax requests one after the other, if each request takes a second, your function takes three. You need to embrace asynchronous code, and use promises and/or callbacks to make it work in parallel. Below is an example using promises.

// this function returns a 'promise'
function makeTr() {
   var requests = []

   // Don't use async: false, but collect the return values of $.ajax. 
   // Those are promises, which you can use in other calls.
   for (var x=0; x<3; x++) requests.push($.ajax(domain + Players[x] + domain2))

   // Wait until all promises are resolved, then perform the 
   // rendering function. The first return below returns a 'promise'
   // of your 'appendObject'
   return Promise.all(requests).then(function(allData) {
      // allData is an array containing the results of your $.ajax
      // calls now. 
      var appendObject = ""
      for (var x=0; x < 3; x++) {
        var data = allData[x]
        appendObject += "<tr>"
        ....
        appendObject += "</tr>"
      }
      return appendObject 
   })
})

Now you can call the function like that

makeTr().then(function(rows) {
  $(...).append(rows)
})

But you better read up on promises and callbacks and asynchronous javascript in general. Because thats on of the best parts of javascript.

This won't run in parallel. [Js is not multi threaded. Async calls are deffered but still run on a single thread](http://stackoverflow.com/a/8963287/542251). Depending on what's actually happening this may or may not "speed things up" — Liam, Aug 01 '16 at 08:37
You're correct Liam, thanks for pointing out my poor choice of words.But still, while JS (on the page) is not multi-threaded, the browser may be and the low-level http requests may be parallelized. — lordvlad, Aug 01 '16 at 09:09

score -2 · Answer 2 · answered Aug 01 '16 at 06:01

-2

$.ajax({
        type: 'GET',
        cache : false,
        url: domain + Players[x] + domain2, 
        success: function(data) {
            appendObject = appendObject + "<td>" + makeTD(data.player, data.rank, data.guild_rank, data.fame, data.last_seen) + "</td>";
            x++;
        }
    });

answered Aug 01 '16 at 06:01

Shree

145
4
15

x++ value will increment after success and it'll take 2 or 3 seconds so x value always 1 when calling ajax async. – Govind Samrow Aug 01 '16 at 06:12

AJAX Requests are slow, can't find solution on other pages

2 Answers2