ajax abort all

ajax abort all

hello,
i'm pretty new to jquery ajax. i have been using it for personal projects for about 6 months now, but this is my first real "professional" application using it. so i have an application that does multiple ajax calls based upon a form and everything is working very well.

but, a few of the queries take (up to) 20 seconds to reply (mining large mysql datasets). if the user changes part of the form i need to make a few new calls, and that works fine too. the problem is the previous ajax requests that are already taking place need to be canceled. i googled this question and found a few answers on stackoverflow, but they didnt quite fit my needs so i wrote my own solution. i'd like some feedback on my implementation to see if what i doing is correct, and if there are any ways to optimize it.

so i have one single "wrapper" ajax function that all my other js functions call:

  1. function closure(url, data, success, error) {
  2. $.ajax({
  3. type: "POST",
  4. url: url,
  5. data: data,
  6. cache: false,
  7. success: success,
  8. error: error,
  9. beforeSend: function(jqXHR) {
  10. xhrPool.push(jqXHR);
  11. },
  12. complete: function(jqXHR, textStatus) {
  13. xhrPool = $.grep(xhrPool, function(x){return x!=jqXHR});
  14. }
  15. });
  16. }

i also have this method for aborting all active ajax calls:

  1. function abortAjax() {
  2. $.each(xhrPool, function(idx, jqXHR) {
  3. jqXHR.abort();
  4. });
  5. }

and example of using these functions would be:

  1. function memberInfo() {
  2. closure(
  3. 'http://<?php echo(URL); ?>/analytics/api/ajax.php',
  4. 'action=memberInfo',
  5. function(result) {
  6. $('#memberInfo').html(result.msg);
  7. },
  8. function(xhr, status, thrown) {
  9. //setupForm();
  10. //$('#error').html(xhr.responseText);
  11. }
  12. );
  13. }
  14. function roi() {
  15. $('#roi').html(' ');
  16. closure(
  17. 'http://<?php echo(URL); ?>/analytics/api/ajax.php',
  18. 'action=roi&time='+timeSelected+'&start='+startDate.format('YYYY-MM-DD')+'&end='+endDate.format('YYYY-MM-DD')+'&stores='+JSON.stringify(menuLocations),
  19. function(result) {
  20. $('#roi').html(numberWithCommas(result.msg));
  21. },
  22. function(xhr, status, thrown) {
  23. //setupForm();
  24. //$('#error').html(xhr.responseText);
  25. }
  26. );
  27. }
  28. function updateGUI() {
  29. abortAjax();
  30. memberInfo();
  31. roi();
  32.                         }

these functions are obviously edited down for simplicity.
the idea is when the updateGUI method is called, it aborts any existing ajax calls then makes new ones. i also included 2 example ajax calls from the app but there are honestly about 20-30 different ones. some are purely text/numeric others generate charts w/ D3js.

im really looking for feedback on the closure "complete" method and it's "grep" call. and the abortAjax "each" loop. do these look ok? any suggestions are welcome :D

thanx!