CODEWITHSUNDEEP
javascriptjqueryajaxjson
pheaselegen
pheaselegen

Reputation: 398

getJSON timeout handling

I am using jQuery getJSON() function. This function getting data with no problem. But sometimes waiting, waiting waiting... And my loading bar showing loading loading loadin at center of page. So jQuery ajax() function have an timeout variable. But i want to use getJSON function. And i think that i can use ajaxStart() and ajaxStop() functions. But how?

$('.loadingDiv')
    .hide()
    .ajaxStart(function() {
        $(this).fadeIn();
        setTimeout("throw '';",15000) //i used this but didn't work
        setTimeout("return;",15000) //i used this but didn't work
        setTimeout("abort();",15000) //i used this but didn't work.(Abort all ajax events)
    })
    .ajaxStop(function() {
        $(this).fadeOut();
    });

Upvotes: 22

Views: 26905

Answers (6)

serraosays
serraosays

Reputation: 7869

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'
    });

Upvotes: 1

Richard
Richard

Reputation: 61289

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).

Upvotes: 3

lethal-guitar
lethal-guitar

Reputation: 4519

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/

Upvotes: 17

Bruno
Bruno

Reputation: 5822

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
    }
});

Upvotes: 12

renab
renab

Reputation: 373

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();
    });

Upvotes: 1

Denys Séguret
Denys Séguret

Reputation: 382160

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.

Upvotes: 17

Related Questions