jQuery when each is completed, trigger function

Question

how do start a function like redirecting to a new page when .each is done looping my elements? this is my current code:

$('#tabCurrentFriends > .dragFriend').each(function(){ 
    var friendId = $(this).data('rowid');
    $.ajax({
        type: "POST", url: "../../page/newtab.php", data: "action=new&tabname=" + tabname + "&bid=" + brugerid + "&fid=" + friendid,
        complete: function(data){
        }
    });
});

when its done looping the .each function, say i have 6 elements it has to the ajax function with and when the 6 elements have been 'ajaxed' then it does something — Flaashing, Dec 10 '11 at 21:54
the looping finishes almost instantaneously. the ajax requests is what takes time, you have to wait for the responses. Once a response is received, the complete function is executed. Study the term 'asynchronous' - http://en.wikipedia.org/wiki/Ajax_(programming) — Vigrond, Dec 10 '11 at 21:57

score 14 · Accepted Answer · edited Jan 23 '17 at 08:09

14

You can use $.when()/$.then() to redirect your users after all the AJAX requests are done:

//create array to hold deferred objects
var XHRs = [];
$('#tabCurrentFriends > .dragFriend').each(function(){  
    var friendId = $(this).data('rowid'); 

    //push a deferred object onto the `XHRs` array
    XHRs.push($.ajax({ 
        type: "POST", url: "../../page/newtab.php", data: "action=new&tabname=" + tabname + "&bid=" + brugerid + "&fid=" + friendid, 
        complete: function(data){ 
        } 
    })); 
}); 

//run a function when all deferred objects resolve
$.when(XHRs).then(function (){
    window.location = 'http://stackoverflow.com/';
});

Edit - to use when with an array, apply must be used:

$.when.apply(null, XHRs).then(function () {
    window.location = 'http://stackoverflow.com/';
});

jQuery AJAX requests create deffered objects that resolve when their complete function fires. This code stores those deffered objects in an array and when they all resolved the function within .then() is run.

Docs:

$.when(): http://api.jquery.com/jquery.when
$.then(): http://api.jquery.com/deferred.then/

edited Jan 23 '17 at 08:09

devuxer

41,681
47
180
292

answered Dec 10 '11 at 21:58

Jasper

75,717
14
151
146

what does the XHRs variable do ? – Flaashing Dec 10 '11 at 22:00
@Flaashing It is an array of deferred objects which resolve when the AJAX call they are associated with finishes. `$.when()` waits for all of the deferred objects to resolve in the XHRs array (meaning all the AJAX calls are finished) and runs the function in `.then()` . – Jasper Dec 10 '11 at 22:04
3

When passing $.when() an array like this, it needs to be formatted like this to work. `$.when.apply(null, XHRs)` – Boidy Jun 19 '14 at 13:23
@Boidy Is that because the signature of `$.when` is expecting an object or list of objects, not an array of objects? I'd have to sift through some old code but I believe I tested this solution. – Jasper Jun 19 '14 at 22:23
1

@jasper Yes I believe so. Maybe its used has changed slightly in the time since you originally posted this answer. When I used your answer on here to try to fix my own problem, I couldn't get it to work, so I posted the problem again, and using `apply()` was the advice I was given, which worked. In the interest of helping others, I thought I would pass on the advice to this question too. see http://stackoverflow.com/questions/24306790/how-do-you-use-when-then-to-trigger-a-function-when-using-deffered-objects . – Boidy Jun 20 '14 at 07:00
I can confirm that `apply` is necessary to get the correct results. See this fiddle: https://jsfiddle.net/devuxer/p4t1gs9z/. I edited the answer for those who don't notice the comment thread. – devuxer Jan 23 '17 at 08:11

score 5 · Answer 2 · answered Dec 10 '11 at 21:54

AJAX happens asynchronously, so you'll have to try something like this:

var total = $('#tabCurrentFriends > .dragFriend').length;
var completed = 0;

$('#tabCurrentFriends > .dragFriend').each(function(){ 
    var friendId = $(this).data('rowid');
        $.ajax({
            type: "POST", url: "../../page/newtab.php", data: "action=new&tabname=" + tabname + "&bid=" + brugerid + "&fid=" + friendid,
            complete: function(data){
              completed++;

              if (completed == total) {
                // All have been loaded.
              }
        }
    });
});

jQuery when each is completed, trigger function

2 Answers2

Linked

Related