Wait until all jQuery Ajax requests are done

Question

How do I make a function wait until all jQuery Ajax requests are done inside another function   In short  I need to wait for all Ajax requests to be done before I execute the next  But how

User · Answer

I m using size check when all ajax load completed   x000D   x000D  function get ajax link  data  callback    x000D        ajax   x000D          url  link  x000D          type   GET   x000D          data  data  x000D          dataType   json   x000D          success  function  data  status  jqXHR    x000D              callback jqXHR status  data  x000D             x000D          error  function  jqXHR  status  err    x000D              callback jqXHR status  jqXHR   x000D             x000D          complete  function  jqXHR  status    x000D            x000D         x000D    x000D   x000D  function run list ajax callback   x000D      var size 0  x000D      var max  10  x000D      for  let index   0  index  lt  max  index      x000D          var link    http   api jquery com ajaxStop    x000D          var data  i index  x000D          get ajax link data function status  data   x000D              console log index  x000D              if size gt max-2   x000D                  callback  done   x000D                x000D              size   x000D               x000D             x000D        x000D    x000D   x000D  run list ajax function info   x000D      console log info  x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 8 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

I highly recommend using   when   if you re starting from scratch    Even though this question has over million answers  I still didn t find anything useful for my case  Let s say you have to deal with an existing codebase  already making some ajax calls and don t want to introduce the complexity of promises and or redo the whole thing   We can easily take advantage of jQuery  data   on and  trigger functions which have been a part of jQuery since forever   Codepen  The good stuff about my solution is    it s obvious what the callback exactly depends on the function triggerNowOrOnLoaded doesn t care if the data has been already loaded or we re still waiting for it it s super easy to plug it into an existing code    x000D   x000D    function     x000D   x000D       wait for posts to be loaded x000D    triggerNowOrOnLoaded  posts   function     x000D      var  body      body    x000D      var posts    body data  posts    x000D   x000D       body append   lt div gt Posts      posts length     lt  div gt     x000D        x000D   x000D   x000D       some ajax requests x000D      getJSON  https   jsonplaceholder typicode com posts   function data    x000D         body   data  posts   data  trigger  posts    x000D        x000D   x000D       doesn t matter if the  triggerNowOrOnLoaded  is called after or before the actual requests  x000D      getJSON  https   jsonplaceholder typicode com users   function data    x000D         body   data  users   data  trigger  users    x000D        x000D   x000D   x000D       wait for both types x000D    triggerNowOrOnLoaded   posts    users    function     x000D      var  body      body    x000D      var posts    body data  posts    x000D      var users    body data  users    x000D   x000D       body append   lt div gt Posts      posts length     and Users      users length     lt  div gt     x000D        x000D   x000D       works even if everything has already loaded  x000D    setTimeout function     x000D   x000D         triggers immediately since users have been already loaded x000D      triggerNowOrOnLoaded  users   function     x000D        var  body      body    x000D        var users    body data  users    x000D   x000D         body append   lt div gt Delayed Users      users length     lt  div gt     x000D          x000D   x000D       2000      2 seconds x000D   x000D      x000D   x000D     helper function x000D  function triggerNowOrOnLoaded types  callback    x000D    types     isArray types    types    types   x000D   x000D    var  body      body    x000D   x000D    var waitForTypes       x000D      each types  function i  type    x000D   x000D      if  typeof  body data type       undefined     x000D        waitForTypes push type   x000D        x000D        x000D   x000D    var isDataReady   waitForTypes length     0  x000D    if  isDataReady    x000D      callback    x000D      return  x000D      x000D   x000D       wait for the last type and run this function again for the rest of the types x000D    var waitFor   waitForTypes pop    x000D     body on waitFor  function     x000D         remove event handler - we only want the stuff triggered once x000D       body off waitFor   x000D   x000D      triggerNowOrOnLoaded waitForTypes  callback   x000D        x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt body gt Hi  lt  body gt  x000D   x000D   x000D

User · Answer

If you want to know when all ajax requests are finished in your document  no matter how many of them exists  just use   ajaxStop event this way     document  ajaxStop function           0       active          In this case  neither you need to guess how many requests are happening in the application  that might finish in the future  nor dig into functions complex logic or find which functions are doing HTTP S  requests         ajaxStop here can also be bound to any HTML node that you   think might be modified by requst      Update  If you want to stick with ES syntax  then you can use Promise all for known ajax methods   Promise all  ajax1    ajax2     then      gt         all requests finished successfully    catch      gt         all requests finished but one or more failed      An interesting point here is that it works both with Promises and   ajax requests    Here is the jsFiddle demonstration     Update 2  Yet more recent version using async await syntax   try     const results   await Promise all  ajax1    ajax2          do other actions   catch ex

User · Answer

Try this way  make a loop inside java script function to wait until the ajax call finished   function getLabelById id        var label           var done   false        ajax          cache  false         url   YourMvcActionUrl          type   GET          dataType   json          async  false         error  function  result             label  undefined            done   true                    success  function  result                label   result Message              done   true                           A loop to check done if ajax call is done     while   done             setTimeout function      500      take a sleep            return label

User · Answer

My solution is as follows   var request       services        GetAddressBookData   function           This is the primary service that loads all addressbook records      request     ajax         type   POST         url   Default aspx GetAddressBook         contentType   application json          dataType   json                          apps          AddressBook            data              Start   function                  services GetAddressBookData              request done function response                trace  ajax successful                  apps AddressBook data   response  d                   apps AddressBook Filter                            request fail function xhr  textStatus  errorThrown                trace  ajax failed -     errorThrown                   Worked quite nicely  I ve tried a lot of different ways of doing this  but I found this to be the simplest and most reusable  Hope it helps

User · Answer

This is working for me It s very simple return   ajax     type   POST     url  urlBaseUrl   data   someData someData     dataType   quot json quot     success  function resultData

User · Answer

when doesn t work for me  callback x  instead of return x worked as described here  https   stackoverflow com a 13455253 10357604

User · Answer

To expand upon Alex s answer  I have an example with variable arguments and promises  I wanted to load images via ajax and display them on the page after they all loaded   To do that  I used the following   let urlCreator   window URL    window webkitURL      Helper function for making ajax requests let fetch   function url        return   ajax           type   get           xhrFields                responseType   blob                     url  url                 Map the array of urls to an array of ajax requests let urls     https   placekitten com 200 250    https   placekitten com 300 250    let files   urls map url   gt  fetch url        Use the spread operator to wait for all requests   when    files  then function            If we have multiple urls  then loop through     if urls length  gt  1               Create image urls and tags for each result         Array from arguments  forEach data   gt                let imageUrl   urlCreator createObjectURL data 0                let img     lt img src   imageUrl  gt                    image container   append img                         else              Create image source and tag for result         let imageUrl   urlCreator createObjectURL arguments 0            let img     lt img src   imageUrl  gt                image container   append img               Updated to work for either single or multiple urls  https   jsfiddle net euypj5w9

User · Answer

Also you could use async js   I think its better than   when because you can merge all kinds of asynchronous call that does not support promises out of the box like timeouts  SqlLite calls etc  and not just ajax requests

User · Answer

A little workaround is something like this      Define how many Ajax calls must be done var ajaxCalls   3  var counter   0  var ajaxCallComplete   function         counter        if  counter  gt   ajaxCalls                    When all ajax calls has been done            Do something like hide waiting images  or any else function call                css  cursor    auto              var loadPersons   function                Show waiting image  or something else            css  cursor    wait         var url   global ctx     loadPersons         getJSON url  function data                   Fun things             complete function       ajaxCallComplete              var loadCountries   function            Do things     var url   global ctx     loadCountries         getJSON url  function data                   Travels             complete function       ajaxCallComplete              var loadCities   function            Do things     var url   global ctx     loadCities         getJSON url  function data                   Travels             complete function       ajaxCallComplete                document  ready function        loadPersons        loadCountries        loadCities          Hope can be useful

User · Answer

jQuery now defines a when function for this purpose   It accepts any number of Deferred objects as arguments  and executes a function when all of them resolve   That means  if you want to initiate  for example  four ajax requests  then perform an action when they are done  you could do something like this     when ajax1    ajax2    ajax3    ajax4    done function a1  a2  a3  a4          the code here will be executed when all four ajax requests resolve         a1  a2  a3 and a4 are lists of length 3 containing the response text         status  and jqXHR object for each of the four ajax calls respectively       function ajax1            NOTE   This function must return the value                from calling the   ajax   method      return   ajax           url   someUrl           dataType   json           data   yourJsonData                                      In my opinion  it makes for a clean and clear syntax  and avoids involving any global variables such as ajaxStart and ajaxStop  which could have unwanted side effects as your page develops   If you don t know in advance how many ajax arguments you need to wait for  i e  you want to use a variable number of arguments   it can still be done but is just a little bit trickier  See Pass in an array of Deferreds to   when    and maybe jQuery  when troubleshooting with variable number of arguments    If you need deeper control over the failure modes of the ajax scripts etc   you can save the object returned by  when   - it s a jQuery Promise object encompassing all of the original ajax queries  You can call  then   or  fail   on it to add detailed success failure handlers

User · Answer

jQuery allows you to specify if you want the ajax request to be asynchronous or not   You can simply make the ajax requests synchronous and then the rest of the code won t execute until they return   For example   jQuery ajax        async  false        code

User · Answer

I found simple way  it using shift     function waitReq id      jQuery ajax          type   POST       url  ajaxurl      data               page   id            success  function resp                                   check array length if not  0  continue to use next array value       if ids length                  waitReq ids shift        2                    error  function resp                                         if ids length                  waitReq ids shift                            var ids    1  2  3  4  5          shift     delete first array value  then print  waitReq ids shift        print 1

User · Answer

On the basis of  BBonifield answer  I wrote a utility function so that semaphore logic is not spread in all the ajax calls   untilAjax is the utility function which invokes a callback function when all the ajaxCalls are completed   ajaxObjs is a array of ajax setting objects  http   api jquery com jQuery ajax     fn is callback function   function untilAjax ajaxObjs  fn      if   ajaxObjs     fn        return        var ajaxCount   ajaxObjs length      succ   null     for  var i   0  i  lt  ajaxObjs length  i        append logic to invoke callback function once all the ajax calls are completed  in success handler      succ   ajaxObjs i   success        ajaxObjs i   success     function data      modified success handler       if  succ            succ data                 ajaxCount--        if  ajaxCount    0            fn      modify statement suitably if you want  this  keyword to refer to another object                      ajax ajaxObjs i      make ajax call     succ   null         Example  doSomething function uses untilAjax     function doSomething          variable declarations   untilAjax        url   url2       dataType   json       success  function data            do something with success data                  url   url1       dataType   json       success  function data            do something with success data                  url   url2       dataType   json       success  function response            do something with success data             function            logic after all the calls are completed

User · Answer

Look at my solution   1 Insert this function  and variable  into your javascript file   var runFunctionQueue callback   function runFunctionQueue f  index  callback       var next index   index   1    if  callback     undefined  runFunctionQueue callback   callback     if  f next index      undefined        console log index     Next function avalaible - gt      next index         ajax         type   GET         url  f index  file        data   f index  data         complete  function             runFunctionQueue f  next index                       else       console log index     Last function          ajax         type   GET         url  f index  file        data   f index  data         async  false        complete  runFunctionQueue callback                 2 Buil an array with your requests  like this   var f                 file   file path   data   action   action   data   any data                file   file path   data   action   action   data   any data                file   file path   data   action   action   data   any data                file   file path   data   action   action   data   any data                3 Create callback function   function Function callback       alert  done        4 Call the runFunctionQueue function with parameters   runFunctionQueue f  0  QuestionInsert callback      first parameter  array with requests data    second parameter  start from first request    third parameter  the callback function

User · Answer

As other answers mentioned you can use ajaxStop   to wait until all ajax request are completed     document  ajaxStop function             This function will be triggered every time any ajax request is requested and completed       If you want do it for an specific ajax   request the best you can do is use complete   method inside the certain ajax request     ajax       type   POST       url   someUrl       success  function data               This function will be triggered when ajax returns a 200 status code  success             complete  function                This function will be triggered always  when ajax request is completed  even it fails returns other status code            error  function                This will be triggered when ajax request fail              But  If you need to wait only for a few and certain ajax request to be done  Use the wonderful javascript promises to wait until the these ajax you want to wait are done  I made a shortly  easy and readable example to show you how does promises works with ajax  Please take a look to the next example  I used setTimeout to clarify the example    x000D   x000D     Note  x000D     resolve   is used to mark the promise as resolved x000D     reject   is used to mark the promise as rejected x000D   x000D    document  ready function     x000D         button   on  click   function     x000D   x000D          var ajax1   new Promise  resolve  reject    gt    x000D                ajax   x000D                  type   GET   x000D                  url   https   miro medium com max 1200 0 UEtwA2ask7vQYW06 png   x000D                  xhrFields    responseType   blob    x000D                  success  function data    x000D                      setTimeout function     x000D                              image1   attr  src   window URL createObjectURL data    x000D                          resolve   Promise ajax1 resolved    x000D                         1000   x000D                     x000D                  error  function     x000D                      reject   Promise ajax1 rejected    x000D                     x000D                  x000D              x000D   x000D          var ajax2   new Promise  resolve  reject    gt    x000D                ajax   x000D                  type   GET   x000D                  url   https   cdn1 iconfinder com data icons social-media-vol-1-1 24  github-512 png   x000D                  xhrFields    responseType   blob     x000D                  success  function data    x000D                      setTimeout function     x000D                               image2   attr  src   window URL createObjectURL data    x000D                           resolve   Promise ajax2 resolved    x000D                         1500   x000D                     x000D                  error  function     x000D                      reject   Promise ajax2 rejected    x000D                     x000D                  x000D              x000D   x000D          var ajax3   new Promise  resolve  reject    gt    x000D                ajax   x000D                  type   GET   x000D                  url   https   miro medium com max 632 1 LUfpOf7teWvPdIPTBmYciA png   x000D                  xhrFields    responseType   blob     x000D                  success  function data    x000D                      setTimeout function     x000D                               image3   attr  src   window URL createObjectURL data    x000D                           resolve   Promise ajax3 resolved    x000D                         2000   x000D                     x000D                  error  function     x000D                      reject   Promise ajax3 rejected    x000D                     x000D                  x000D              x000D           x000D          Promise all  ajax1  ajax2  ajax3   then values   gt    x000D              console log  We waited until ajax ended      values   x000D              console log  My few ajax ended  lets do some things     x000D             reason   gt    x000D              console log  Promises failed      reason   x000D              x000D           x000D             Or if you want wait for them individually do it like this x000D             ajax1 then values   gt    x000D                console log  Promise 1 resolved      values  x000D                reason   gt    x000D                 console log  Promise 1 failed      reason  x000D                 x000D          x000D   x000D      x000D  img   x000D    max-width  200px  x000D    max-height  100px  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt button gt Make AJAX request lt  button gt  x000D   lt div id  newContent  gt  x000D       lt img id  image1  src    gt  x000D       lt img id  image2  src    gt  x000D       lt img id  image3  src    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

javascript is event-based  so you should never wait  rather set hooks callbacks  You can probably just use the success complete methods of jquery ajax  Or you could use  ajaxComplete        log   ajaxComplete function e  xhr  settings      if  settings url     ajax test html           this  text  Triggered ajaxComplete handler           and you can do whatever other processing here  including calling another function              though youy should post a pseudocode of how your s  ajax request s  is are  called to be more   precise

User · Answer

I found a good answer by gnarf my self which is exactly what I was looking for     jQuery ajaxQueue     This handles the queues      function         var ajaxQueue               ajaxQueue   function ajaxOpts         var oldComplete   ajaxOpts complete       ajaxQueue queue function next           ajaxOpts complete   function             if  oldComplete  oldComplete apply this  arguments            next                      ajax ajaxOpts                    jQuery     Then you can add a ajax request to the queue like this     ajaxQueue           url   page php           data   id  1           type   POST           success  function data                    status   html data

User · Answer

If you need something simple  once and done callback            multiple ajax calls above         var callback   function                  if    active     0                    setTimeout callback   500                    return                              whatever you need to do here                                      callback

User · Answer

Use the ajaxStop event   For example  let s say you have a loading     message while fetching 100 ajax requests and you want to hide that message once loaded   From the jQuery doc       loading   ajaxStop function         this  hide          Do note that it will wait for all ajax requests being done on that page

User · Answer

NOTE  The above answers use functionality that didn t exist at the time that this answer was written   I recommend using jQuery when   instead of these approaches  but I m leaving the answer for historical purposes   -  You could probably get by with a simple counting semaphore  although how you implement it would be dependent on your code   A simple example would be something like     var semaphore    0         counting semaphore for ajax requests     all queued   false     bool indicator to account for instances where the first request might finish before the second even starts  semaphore      get  ajax test1 html   function data        semaphore--      if  all queued  amp  amp  semaphore     0               process your custom stuff here            semaphore      get  ajax test2 html   function data        semaphore--      if  all queued  amp  amp  semaphore     0               process your custom stuff here            semaphore      get  ajax test3 html   function data        semaphore--      if  all queued  amp  amp  semaphore     0               process your custom stuff here            semaphore      get  ajax test4 html   function data        semaphore--      if  all queued  amp  amp  semaphore     0               process your custom stuff here               now that all ajax requests are queued up  switch the bool to indicate it all queued   true    If you wanted this to operate like  async  false  but you didn t want to lock the browser  you could accomplish the same thing with a jQuery queue   var  queue       lt div  gt      queue queue function          get  ajax test1 html   function data             queue dequeue               queue function          get  ajax test2 html   function data             queue dequeue               queue function          get  ajax test3 html   function data             queue dequeue               queue function          get  ajax test4 html   function data             queue dequeue

[javascript] Wait until all jQuery Ajax requests are done?

Examples related to javascript

Examples related to jquery

Examples related to ajax