Non-Blocking code Issue in javascript

Question

I was trying to make a brute force poll voting script.

$('#vote').click(function(e) {                                      
    var noOfvotes = 0;
    var noOfattempt =0;
    var noOffail =0;

    for(var i =0 ; i<500;i++){
        $.ajax({
            url: 'http://www.example.com/survey/',
            type: 'POST',                   
            data: {poll: '123',
                   vote:"option3"                             
                  },
        })
            .done(function() {
                noOfvotes++;
            })
            .fail(function() {
                noOffail++;
            })
            .always(function() {
                noOfattempt++;
            });
    }
    //Result printing
    console.log('No of attempt :' + noOfattempt);       
    console.log('No of done :' + noOfvotes);
    console.log('No of fail :' + noOffail); 
});

The issue i faced is result printing is executed before these ajax requests completed.So out put was like this on console

No of attempt :0   
No of done :0
No of fail :0

But I need to get these lines executed after all Ajax requests finishes. How can I make a blocking code for this situation.

read about callbacks stackoverflow.com/questions/9596276/… — rafaelcastrocouto
– rafaelcastrocouto, Commented Mar 6, 2014 at 18:20
I think you're missing the entire point of having callbacks. They exist because you don't want requests to block. Instead of using blocking code, you need to change your approach so that whatever needs the response will be called inside a callback. — cookie monster
– cookie monster, Commented Mar 6, 2014 at 18:20
put the print in the success call back of the ajax function (.done) — Huangism
– Huangism, Commented Mar 6, 2014 at 18:21
Well making 500 silmutanous requests can only bring you issues... — A. Wolff
– A. Wolff, Commented Mar 6, 2014 at 18:22
...and sending out 500 XHR requests at once isn't a great idea. Why are you trying to cheat a poll in the first place? — cookie monster
– cookie monster, Commented Mar 6, 2014 at 18:22

adeneo · Accepted Answer · 2014-03-06 18:22:09Z

4

Stack the requests in an array and use $.when to determine when they are all done

$('#vote').click(function (e) {
    var XHR         = [],
        noOfvotes   = 0,
        noOfattempt = 0,
        noOffail    = 0;

    for (var i = 0; i < 500; i++) {
        XHR.push(
            $.ajax({
                url: 'http://www.example.com/polling/',
                type: 'POST',
                data: {
                    poll: '123',
                    vote: "option3"
                },
            }).done(function () {
                noOfvotes++;
            }).fail(function () {
                noOffail++;
            }).always(function () {
                noOfattempt++;
            })
        );
    }

    $.when.apply(undefined, XHR).done(function() {
        console.log('No of attempt :' + noOfattempt);
        console.log('No of vote :' + noOfvotes);
        console.log('No of fail :' + noOffail);
    });
});

answered Mar 6, 2014 at 18:22

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sanoob Over a year ago

Thanks a lot. I didn't know function when and apply

freakish · Accepted Answer · 2014-03-06 19:10:33Z

3

$('#vote').click(function(e) {                                      
    // some code

    var requests = [];
    for(var i = 0; i < 500; i++){
        requests.push($.ajax({ ... }));
    }
    $.when.apply($, requests).then(function() {
        console.log('No of attempt :' + noOfattempt);       
        console.log('No of vote :' + noOfvotes);
        console.log('No of fail :' + noOffail); 
    });
});

EDIT Note that .when fires when all requests finish the job or one of them fails. If you want to fire a callback after all of requests finish (no matter whether there's an error or not), then try this:

var custom_when = function(reqs) {
    var def = $.Deferred(),
        counter = reqs.length;
    for (var i = 0; i < counter; i++) {
        reqs[i].always(function() {
            counter--;
            if (!counter) {
                def.resolve();
            }
        });
    }
    return def.promise();
};

and use it like that:

custom_when(requests).then(...);

edited Mar 6, 2014 at 19:10

answered Mar 6, 2014 at 18:23

freakish

57k12 gold badges141 silver badges181 bronze badges

9 Comments

A. Wolff Over a year ago

What are noOfattempt, noOfvotes and noOffail ??? How do you update corresponding values?

adeneo Over a year ago

Note that when using .then() it will be triggered right away if one of the promises is rejected (as in the ajax call fails).

freakish Over a year ago

@A.Wolff Who cares? These variables don't matter.

adeneo Over a year ago

@freakish - That doesn't help much, I'm mistaken as well, as done only fires if they where all successful.

A. Wolff Over a year ago

@adeneo indeed here then callback is equivalent to success callback

|

Matt Pileggi · Accepted Answer · 2014-03-06 18:22:10Z

1

Move the log statements into .always and check that the noOfattempt is equal to the amount you tried.

.always(function() {
  noOfattempts++;
  if (noOfattempts === 500) {
    // we're done
  }
 })

answered Mar 6, 2014 at 18:22

Matt Pileggi

7,2364 gold badges19 silver badges20 bronze badges

Collectives™ on Stack Overflow

Non-Blocking code Issue in javascript

3 Answers 3

1 Comment

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related