jQuery Synchronous Form Submission with Timeout

Question

I am attempting to submit a form to an external site which is prepared to receive it, but there were some points when the external site was done and caused my site to be stuck waiting with no response just using form.submit()

I wrote the following to try to handle this, but the timeout is not being thrown.

$.ajax({
      async: false,
      url: url,
      data: $('#tppForm').serialize(),
      type: 'POST',
      timeout: 5000,
      statusCode: {
         404: function() {
            console.log('Site Not Found');
         },
         500: function() {
            console.log('Site Down');
         }
      },
      error: function() {
         console.log('Timeout');
      }
});

Answer 1

I checked both the jQuery documentation as well as other sources, the behavior of timeout: is not clearly specified for async:false.

My suggestion is to change this to async:true to better handle the unpredictable nature of remote (network) calls. See jquery ajax() async false and jQuery ajax success anonymous function scope .

This will change the challenge to one where your client side (browser) must have a "ready" state flag that can indicate to the user they should wait and block overlapping calls. Personally I like to alter the submit button text / color for user feedback. Just prior to making your AJAX call you should also check the state flag to ensure there are no pending operations.