Skip to content

You should always add Timeout to you AJAX Call In JQuery

June 26, 2013

Something that I have discovered that’s really useful in JQuery programming is to use the timeout function. After finding out that my network cable was very loose when connected to my laptop, and running the AjAX call to login without the timeout function, my program would just sit there not responding to anything, no error messages or anything relevant.

This baffled me for a while and having checking on the web developer toolkit, the console had said ‘loggin in’ and that was that.

Once I added the timeout parameter inside the AJAX call like so: – 

timeout: 5000 // sets timeout to 5 seconds

This immediately informed me with a timer on the console whether the call to the url was made, and if not an error message was displayed from the code below: –

     function SuccessFunction(data, status) {

              var obj = jQuery.parseJSON(data.d);
              if (obj.Success == “true”) {
                  writeConsole(‘logging in’);
                  $.ajax({
                      type: “GET”,
                      url: ‘<% Response.Write(url); %>?’ + obj.UserNameAndPassword,
                      dataType: ‘jsonp’,
                      complete: function() {
                          $.mobile.changePage(“#success”, { transition: “fade” });
                      },
                      timeout: 5000 // sets timeout to 5 seconds
                  });
              }
              else {
                  $(“#popupFail”).popup(“open”, { transition: “fade” });
                  writeConsole(‘login failure ‘);
              }
              return;
          }

So its very useful to add timeout, and also console write messages to tell which part of the JQuery function has been run.

Hope that helps!

Advertisements

From → Uncategorized

2 Comments
  1. Another issue in relation to this is if you make a number of AJAX calls, make sure that the async setting are all set the same.

  2. Adrien Be permalink

    Why not leaving jquery’s ajax timeout setting but rather display a relevant message when the default timeout is reached (see http://stackoverflow.com/a/3543713/759452) ?

    One “good” reason to set the jquery’s ajax timeout value is if you want all your users to have the same value, since the default timeout value seems to be set by the browser, see http://stackoverflow.com/a/2507385/759452

    However, I still don’t know if this jquery ajax timeout value does override the browser timeout value in all cases. If jquery ajax timeout value is above the browser timeout value, then I would expect the browser to ignore the value set in the ajax call. But I have not tested this behavior across browser.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: