Question

I have multiple ajax going through in an each statement:

$('.product').each(function () {
      var product = $(this).attr('data-product');
      $.ajax({
          url:"/ajax/product",
          data:"lookup=" + product,
          success: function () { /* callback */ }
      });
});

There are 5 products currently in the each loop.

My problem is that the user cannot press the form submit button until all of these ajax lookups have completed; the ajax call takes some time to process each time due to it calling an external API. More specifically, they can press the submit button but it does not do anything until all of the ajax functions appear to have completed.

How can I make the ajax calls volatile / not wait for a reply if the user wants to submit the form?

Answer 1

You should make use of setTimeout() which will make the call to happen on a different thread.

$('.product').each(function() {
      setTimeout(function () {
         var product = $(this).attr('data-product');
         $.ajax({
            url:"/ajax/product",
            data:"lookup=" + product,
            success: function () { /* callback */ }
         });
    });
});

jQuery.deferred allows similar feature where code is executed asynchronously.