Question

26

Javascript - AJAX request inside loops

rated 0 times [ 27] [ 1] / answers: 1 / hits: 55414 / 10 Years ago, mon, march 24, 2014, 12:00:00

I'm using jQuery to send an AJAX request, retrieving data from a server.

That data is then appended to an element. This should happen 5 times, but it will always happen randomly either 3, 4, or 5 times. Basically, sometimes the loop will skip the AJAX request, but the majority of the time it catches it. How do I make sure it completes the request five times every time? and what is the reason behind this random behavior of skipping AJAX request?(side note. I've checked the request errors, but it never alerted of a request failure)

Here's my JS:

while (counter < 6) {

    $.ajax({

        url:'http://whisperingforest.org/js/getQuote.php',

        async: false,

        dataType: 'jsonp',

        success:function(data){

            $('.quoteList').append('<li>' + data +'</li>');

            totalQuotes++;

        }

    });

    counter++;

}

P.s. this happens on a button press.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

blaisep

Add To Favorites

Follow

Total Points: 748

Total Questions: 95

Total Answers: 108

Location: Federated States of Micronesia

Member since Sun, May 16, 2021

3 Years ago

blaisep questions

1 Change Center position of React leaflet map

Wed, Dec 16, 20, 00:00, 4 Years ago

1 Get JavaScript Map values as array?

Sun, Aug 16, 20, 00:00, 4 Years ago

1 How to do an inline for loop in JavaScript, that's not connected to a variable

Tue, Apr 7, 20, 00:00, 4 Years ago

1 How to write data to a file using Puppeteer?

Tue, Nov 12, 19, 00:00, 5 Years ago

1 Swiper coverflow effect not working as expected

Mon, Nov 11, 19, 00:00, 5 Years ago

View All

answered 10 Years ago analiseb · Accepted Answer

Don't do it synchronously. Use the callback. Here is a demo for you: http://jsfiddle.net/y45Lfupw/4/

<ul class=quoteList></ul>

<input type=button onclick=getData(); value=Go Get It!>



<script>

var counter = 0;



window.getData=function()

{

    /* This IF block has nothing to do with the OP. It just resets everything so the demo can be ran more than once. */

    if (counter===5) {

        $('.quoteList').empty();

        counter = 0;

    }



    $.ajax({

        /* The whisperingforest.org URL is not longer valid, I found a new one that is similar... */

        url:'http://quotes.stormconsultancy.co.uk/random.json',

        async: true,

        dataType: 'jsonp',

        success:function(data){

            $('.quoteList').append('<li>' + data.quote +'</li>');

            counter++;

            if (counter < 5) getData();

        }

    });

}

</script>

Setting async to false blocks the main thread (responsible for
executing JavaScript, rendering the screen, etc) and waits for the XHR
to complete.

This is almost always a terrible idea. Users don't like unresponsive
UIs. (https://stackoverflow.com/a/20209180/3112803)

Just search stackoverflow for ajax async: false and you will find MANY good explanations on this. Everyone will discourage you from using async:false. Here's is a great explanation: https://stackoverflow.com/a/14220323/3112803