getJSON timeout handling

Question

I am using jQuery getJSON() function. This function getting data with no problem. But sometimes waiting, waiting waiting... And my loading bar showing loading loadi

Answer 1

getJSON() returns a promise on which you can call the abort function :

var p = $.getJSON(..., function(){ alert('success');});
setTimeout(function(){ p.abort(); }, 2000);

EDIT : but if your goal is just to abort if it takes too much time, then lethal-guitar's answer is better.

Answer 2

the setTimeout function executes a set of code after a specified number of milisecons in the global scope.

The getJSON function (per the jQuery documentation here http://api.jquery.com/jQuery.getJSON/) is shorthand for:

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

so you would want to make your call like so:

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success,
  timeout: 15000
});

$('.loadingDiv')
    .hide()
    .ajaxStart(function() {
        $(this).fadeIn();
    })
    .ajaxStop(function() {
        $(this).fadeOut();
    });

Answer 3

As lethal-guitar mentioned getJSON() function is just an shorthand for $.ajax(). If you want to detect if a timeout has occurred rather than an actual error use the code below.

var request = $.ajax({
    dataType: "json",
    url: url,
    data: data,
    success: function( ) { },
    timeout: 2000
}).fail( function( xhr, status ) {
    if( status == "timeout" ) {
        // do stuff in case of timeout
    }
});

Answer 4

There's always the nuclear route as well:

//Set AJAX timeout to 10 seconds
$.ajaxSetup({
  timeout: 10*1000
});

This will set all the AJAX requests your program makes (even via $.getJSON) to have a time out of 10 seconds (or what have you).

Answer 5

I don't think any of these answers are ideal. I know this is years late, but what you want to do is use the success/error callback options of the .ajax(); method when receiving a JSONP response.

Example of how I would structure this:

    // Call
    $.ajax({

      // URL you want to get
      url: 'http://example.com/json?callback=?',

      // Set a realistic time in milliseconds
      timeout: 3000,

      // Put in success callback function here, this example
      // shows you the data you got back from the call
      success: function(data) {
        console.log(data);
      },

      // Put in an error handling function, just an alert in this case
      error: function(badData) {
        alert('The call was unsuccessful');
      },

      type: 'POST'
    });

Answer 6

getJSON() is just a shorthand for the following:

$.ajax({
    dataType: "json",
    url: url,
    data: data,
    success: success
});

So you could use $.ajax() and specify the timeout option as desired. See also: http://api.jquery.com/jQuery.getJSON/