CODEWITHSUNDEEP
jqueryajaxperformance
user1173169
user1173169

Reputation:

Ajax request in a "for" loop. Counter's unexpected behaviour

I have problems with the following block of code:

function MediaImport4pr(nbr) {
    $("#latestPr ul.list").empty();

    $.ajax({
        url: "/aQ_OX/local/LATESTPR/LatestPr.txt",
        dataType: "text",
        success: function(data) {
            //var array = data.split(',');
            var array = data;
            var arrayWithRightNumberOfPr = ["tst4_01-11-2014.aspx", "tst1_11-06-2014.aspx", "tst2_10-05-2014.aspx", "tst5_27-03-2014.aspx"];
            for (im = 0; im < arrayWithRightNumberOfPr.length; im++) {
                AjaxRequest(im, arrayWithRightNumberOfPr);
            }


        }
    });
}



function AjaxRequest(im, array) {
    $.get("/aQ_OX/LOCAL/ASPXGENERATED/" + array[im], function(data) {
        var targetTitle = $(data).find('#title').html();
        var targetDate = $(data).find('#date').html();
        var targetPdf = $(data).find('#pdf').html();

        if (targetPdf != "noPDF") {
            $("#latestPr ul.list").append("<li class='item pr" + im + "'><p class='date'>" + targetDate + "</p><ul><li class='title'><a class='title' href='/aQ_OX/LOCAL/ASPXGENERATED/" + array[im - 1] + "'>" + targetTitle + "</a></li><li class='pdf'><a class='pdf' href='" + targetPdf + "'>PDF</a></li></ul></li>");
        } else {
            $("#latestPr ul.list").append("<li class='item pr" + im + "'><p class='date'>" + targetDate + "</p><ul><li class='title'><a class='title' href='/aQ_OX/LOCAL/ASPXGENERATED/" + array[im - 1] + "'>" + targetTitle + "</a></li></ul></li>");
        }
    });
}

Basically, this code generates "li" tags, the problem is the "for" loop starts with very different numbers everytime it's run. I simply expected 0,1,2,3 etc but sometimes i have 0,1,3,4 or 2,3,0,1 and so on ...

  1. What is the problem in my code ?
  2. except this error, this code works well but i have a performance problem, it takes 3 seconds for being displayed. it's way too long. I'm not looking for the most performant code but something faster would be appreciated! Thanks for your recommandations...

Upvotes: 0

Views: 144

Answers (1)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93601

Not the actual issue, but good practice: Make the loop counter im local by adding var (it is currently a global so is shared across all parallel calls to MediaImport4pr)

for (var im = 0; im < arrayWithRightNumberOfPr.length; im++)

Order is not guaranteed:

The problem is purely down to expecting the order of your Ajax results to be the same as the requests... But Ajax will not guarantee which requests will return first. You need to ensure you have enough information in the response to insert the results into the display in the desired order (and not assume anything about the incoming order).

Reduce the requests:

The second issue of timing is down to the response time of your server and the number of requests. Check the network traffic and timings for the multiple requests you are sending (e.g. via the F12 Chrome debug tools, Network tab).

Basically you have "a lot" of network calls happening and the browser will limit the number of simultaneous Ajax calls). Maybe combine into fewer calls returning more data each? A single request with 10 times the data is preferable to 10 smaller calls in this case. This will also solve the ordering issue as the array of returned results will be predefined by the server :)

Upvotes: 1

Related Questions