Set timeout for ajax (jQuery)

Problem

$.ajax({
    url: "test.html",
    error: function(){
        //do something
    },
    success: function(){
        //do something
    }
});

Sometimes the success function works well, and other times it does not.

Is it true that I set a timeout for this ajax request? If the time limit is exceeded, for example, show an error.

The issue is that an ajax request causes the block to be frozen until it is completed. It will never stop if the server is down for a short period of time.

Asked by James

Solution #1

Please study the documentation for $.ajax, as this is a covered topic.

$.ajax({
    url: "test.html",
    error: function(){
        // will fire when timeout is reached
    },
    success: function(){
        //do something
    },
    timeout: 3000 // sets timeout to 3 seconds
});

The textStatus parameter of the error: function(jqXHR, textStatus, errorThrown) option can be used to determine what type of error was thrown. “Timeout,” “Error,” “Abort,” and “ParserError” are the available options.

Answered by Intelekshual

Solution #2

Here are some examples of how to establish and detect timeouts in both the old and new jQuery paradigms.

Live Demo

With jQuery 1.8+, you can make promises.

Promise.resolve(
  $.ajax({
    url: '/getData',
    timeout:3000 //3 second timeout
  })
).then(function(){
  //do something
}).catch(function(e) {
  if(e.statusText == 'timeout')
  {     
    alert('Native Promise: Failed from timeout'); 
    //do something. Try again perhaps?
  }
});

jQuery 1.8+

$.ajax({
    url: '/getData',
    timeout:3000 //3 second timeout
}).done(function(){
    //do something
}).fail(function(jqXHR, textStatus){
    if(textStatus === 'timeout')
    {     
        alert('Failed from timeout'); 
        //do something. Try again perhaps?
    }
});​

jQuery <= 1.7.2

$.ajax({
    url: '/getData',
    error: function(jqXHR, textStatus){
        if(textStatus === 'timeout')
        {     
             alert('Failed from timeout');         
            //do something. Try again perhaps?
        }
    },
    success: function(){
        //do something
    },
    timeout:3000 //3 second timeout
});

It’s worth noting that the textStatus argument (or jqXHR.statusText) will inform you about the mistake. If you want to know if the failure was caused by a timeout, this could be handy.

src: http://api.jquery.com/jQuery.ajax/

Answered by Brandon Boone

Solution #3

You might utilize the ajax options timeout setting like this:

$.ajax({
    url: "test.html",
    timeout: 3000,
    error: function(){
        //do something
    },
    success: function(){
        //do something
    }
});

Here’s where you can learn all about the ajax options: http://api.jquery.com/jQuery.ajax/

When a timeout occurs, the error handler is called rather than the success handler:)

Answered by Martin Jespersen

Solution #4

employ the jQuery.ajax method, which has a lot of features. As an example, see https://stackoverflow.com/a/3543713/1689451.

Simply merging your code with the related SO query without testing:

target = $(this).attr('data-target');

$.ajax({
    url: $(this).attr('href'),
    type: "GET",
    timeout: 2000,
    success: function(response) { $(target).modal({
        show: true
    }); },
    error: function(x, t, m) {
        if(t==="timeout") {
            alert("got timeout");
        } else {
            alert(t);
        }
    }
});​

Answered by Rudolf Mühlbauer

Solution #5

Your request should look something like this.

client.ajax({
               url:'web-url',
               method: 'GET',
               headers: 'header',
               timeout: 3000
          });

Answered by Lovekush Vishwakarma

Post is based on https://stackoverflow.com/questions/5225597/set-timeout-for-ajax-jquery