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 http://stackoverflow.com/questions/9596276/how-to-explain-callbacks-in-plain-english-how-are-they-different-from-calling-o — rafaelcastrocouto, Mar 06 '14 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, Mar 06 '14 at 18:20
put the print in the success call back of the ajax function (.done) — Huangism, Mar 06 '14 at 18:21
Well making 500 silmutanous requests can only bring you issues... — A. Wolff, Mar 06 '14 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, Mar 06 '14 at 18:22
@A.Wolff This is not about DoS attack, I just need to know how to make a call back function when there is a loop. adeneo freekish helped with the stack idea. — Sanoob, Mar 06 '14 at 18:27
@A.Wolff If I were asking this question without example I would have got -10. I faced a coding situation that is the point you wanna look. — Sanoob, Mar 06 '14 at 18:31

score 4 · Accepted Answer · answered Mar 06 '14 at 18:22

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);
    });
});

Thanks a lot. I didn't know function `when` and `apply` – Sanoob Mar 06 '14 at 18:29 — Sanoob, Mar 06 '14 at 18:29

freakish · Answer 2 · 2014-03-06T19:10:33.387

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 06 '14 at 19:10

answered Mar 06 '14 at 18:23

freakish

54,167
9
132
169

1

What are `noOfattempt, noOfvotes and noOffail` ??? How do you update corresponding values? – A. Wolff Mar 06 '14 at 18:26
Note that when using `.then()` it will be triggered right away if one of the promises is rejected (as in the ajax call fails). – adeneo Mar 06 '14 at 18:28
@A.Wolff Who cares? These variables don't matter. – freakish Mar 06 '14 at 18:30
@freakish - That doesn't help much, I'm mistaken as well, as done only fires if they where all successful. – adeneo Mar 06 '14 at 18:30
1

@adeneo indeed here `then` callback is equivalent to success callback – A. Wolff Mar 06 '14 at 18:30
@freakish I'm not sure, i was thinking it was the OP wish, to update corresponding values, maybe i'm wrong – A. Wolff Mar 06 '14 at 18:32
`always()` always fires, but will still fire too early if one request fails. – adeneo Mar 06 '14 at 18:32
@A.Wolff No, he wants to know how to fire a callback once all ajax requests finish the job. – freakish Mar 06 '14 at 19:12
@freakish so then your `custom_when` should be the way to go +1 – A. Wolff Mar 06 '14 at 19:20

score 1 · Answer 3 · answered Mar 06 '14 at 18:22

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 06 '14 at 18:22

Matt Pileggi

7,126
4
16
18

Non-Blocking code Issue in javascript

3 Answers3