ajax - Detecting When Javascript is Done Executing - Stack Overflow

admin管理员组

文章数量:1314442

Is there an event in javascript that I could bind some sort of listener to that will tell me when all javascript/jQuery/Ajax is done executing on the page? The page will not be loading/unloading/reloading, etc between the time the execution begins and the time that I need the listener to "listen", so those events don't work. The page literally is not doing anything. The button is clicked and some javascript functions fire which contain Ajax calls to web services. After all have finished, I want to change window.location. But window.location is changing before the web services have finished in my case.

Currently using setTimeout to achieve this, but as sometimes the code needs more time to run than normal, sometimes the window.location is firing before all the other javascript has finished. Simply put

<input type = "button"... onclick="doThis();";

function doThis() {
   try{
      //Contains AJAX calls to web services which is mainly what screws up my timing since it may still be trying to execute stuff when the redirect statement happens
      }
   catch (e) {
      }
  //Currently doing setTimeout(redirect, 10000);
  //Would like to simply detect when all of the above is done and then redirect.  
}

Edit: Left out a crucial piece of info. The AJAX calls are in a for loop. The use of variables and success callbacks hasn't been working so well for me as by the time my success callback is executing, my variables have taken on new values in the for loop.

Is there an event in javascript that I could bind some sort of listener to that will tell me when all javascript/jQuery/Ajax is done executing on the page? The page will not be loading/unloading/reloading, etc between the time the execution begins and the time that I need the listener to "listen", so those events don't work. The page literally is not doing anything. The button is clicked and some javascript functions fire which contain Ajax calls to web services. After all have finished, I want to change window.location. But window.location is changing before the web services have finished in my case.

Currently using setTimeout to achieve this, but as sometimes the code needs more time to run than normal, sometimes the window.location is firing before all the other javascript has finished. Simply put

<input type = "button"... onclick="doThis();";

function doThis() {
   try{
      //Contains AJAX calls to web services which is mainly what screws up my timing since it may still be trying to execute stuff when the redirect statement happens
      }
   catch (e) {
      }
  //Currently doing setTimeout(redirect, 10000);
  //Would like to simply detect when all of the above is done and then redirect.  
}

Edit: Left out a crucial piece of info. The AJAX calls are in a for loop. The use of variables and success callbacks hasn't been working so well for me as by the time my success callback is executing, my variables have taken on new values in the for loop.

• javascript
• ajax

Share Improve this question Follow edited Nov 1, 2011 at 12:24 jmease asked Oct 31, 2011 at 18:24 jmeasejmease 2,53555 gold badges4949 silver badges8989 bronze badges 1

• 2 callbacks are your friends ;) – c69 Commented Oct 31, 2011 at 18:34

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

What you are trying to achieve is a classical concurrent programming problem. It is solved by the use of a barrier.

To put it simply, you need to:

1. Count how many calls you've done.
2. Set a callback on all AJAX pletion events.
3. Make that callback decrement the number of calls.
4. The callback checks whether the number of calls has reached zero or not. If yes, then your final code (here, redirect) is called.

The actual implementation is left as an exercise to the reader  :)

Hint: embed AJAX calls into a function that handles all counter incrementation and callback setting.

What I do:

• Create a variable that represents the number of outstanding AJAX calls.
• Before making an AJAX call, increment the variable.
• At the end of the code that pletes an AJAX call, call a function (e.g. ajaxComplete).
  
• ajaxComplete should decrement the count. When it reaches zero, you know all your calls are plete.

Assuming you're using jQuery.ajax, it sounds like you're looking for ajaxStop.

Why don't you try using something like the Underscore library's after function in the callbacks?

var done = _.after(3, function() {
    window.location = 'http://example.';
});

$.ajax({
  url: '/tic',
  success: function() {
    done();
  }
});
$.ajax({
  url: '/tac',
  success: function() {
    done();
  }
});
$.ajax({
  url: '/toe',
  success: function( data ) {
    done();
  }
});

You should check for the response from AJAX call, and only in that response do redirect. This way you will avoid doing redirect while AJAX was still executing.

本文标签： ajaxDetecting When Javascript is Done ExecutingStack Overflow