Web Niraj
  • Facebook
  • Flickr
  • Github
  • Linkedin
  • Twitter
  • YouTube
Online portfolio, code examples and developer blog
  • About
  • Contact
  • Portfolio
  • WordPress
Search the site...
  • Home
  • Blog
  • Making Ajax Calls Sequentially using jQuery

Making Ajax Calls Sequentially using jQuery

6

In a recent project, there was a need to make ajax calls to a remote server in a sequential manner to synchronise data. Each call would wait for the previous one to complete, before triggering the next one. To achieve this, I used jQuery and Promises together create the below code.

The Code

The code below makes uses of Promises in jQuery to wait for ajax calls to complete before starting the next call in the sequence. All the ajax calls are made to the same API, but the data sent in the call are defined in the items array.

On line 34-41, we use the jQuery $.map functions to cycle through the items in the items array, and then call an ajax function. When all the items in the array have been processed, the jQuery $.when.apply function allows us to trigger a final callback (lines 41-44).

This code is useful when you need to upload a number of items to a server in sequence, for example, uploading images from the user’s device one at a time. If we sent all the images in one go, it would not only slow down the user’s device, but it could also overwhelm the server. So, making the calls sequentially can help manage the situation.

Let me know if you have any questions or issues in the comments section below.

Ajax, JavaScript, jQuery, Tutorial

6 comments on “Making Ajax Calls Sequentially using jQuery”

  1. Bill Seddon says:
    December 8, 2019 at 1:37 AM

    Thanks for publishing the example, it’s just what I need. Its interesting to see how you have been able to make the requests sequential using the ‘looper’ deferred variable.

    Reply
  2. matthewbondaudio says:
    May 6, 2020 at 4:37 AM

    HI Niraj;
    thanks for publishing this example. I have project where to made a db call more that 100000 times and get the response until all the queries are done , what would be the best approach to do so. The db calls must be done sequentially one by one in other to over system saturation .
    jeff

    Reply
    • Niraj Shah says:
      May 6, 2020 at 11:35 AM

      Thats a lot of DB calls to make using Ajax. You should consider using another method like queue instead, because if one if these calls fail, you won’t be able to restart from the failed call.

      Reply
  3. Jim says:
    May 20, 2020 at 12:03 AM

    Does it pay to run the ajax calls in batches, for instance 5-10 at a time? I have 50 images that I GET from my server. I am going to try your code for this, 1 at a time as you show, but just wanted your opinion on doing it in batches. Thoughts? Thanks, great article, thanks you.

    Reply
  4. Jim says:
    May 20, 2020 at 4:08 PM

    FYI – It is better! 🙂 Thank you for this article, well done!

    Reply
  5. Ryan says:
    July 13, 2021 at 7:46 AM

    Thanks in 2021. I was able to make sequential uploads with your example.

    Reply

Leave a ReplyCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

StackExchange / StackOverflow

profile for Niraj Shah on Stack Exchange, a network of free, community-driven Q&A sites

Support Me

Buy Me a Coffee

PSN Profile

Tags

ACL Amazon Web Services Android Android 4.4 KitKat Android 5.0 Lollipop Apache Backup Bash Bug Command Line Cordova cPanel / WHM Facebook Facebook Graph API Facebook PHP SDK 4.0 Facebook Social Plugins Fan Page Flash Geolocation Google Nexus 5 Hacking HTML5 Input Sanitization iOS JavaScript jQuery Laravel 5 Laravel 5.2 Linux Mac OS NodeJS Parse PDF PHP Plugin Portfolio Review Security Server SSH SSL Sysadmin Tutorial WordPress WordPress Plugins
© 2011-2025 Niraj Shah
  • Blog
  • Portfolio
  • WordPress
  • About Me
  • Contact Me
  • Privacy Policy
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Privacy Policy