jQuery promise with getJSON and callback

Question

I have an ajax call with a callback. I want to call another method JUST after the callback has ended..I used the promise API from jQuery but as you can see below the second method is called before the first one has completed.

Any ideas?

  my.data = function () {
     var loadFlights = function (callback) {
        //$.getJSON("/api/Acceptance/", function (data) {
        //    callback(data);
        //}); 
        $.getJSON("/api/Acceptance").success(function (data) {
           console.log("first: " + new Date().getTime());
           callback(data); 
        })
        .then(console.log("second:" + new Date().getTime()));
     };

     return { load: loadFlights }
  }();

result to console:

second:1357393615115 
first: 1357393615246

score 19 · Accepted Answer · answered Jan 05 '13 at 13:55

19

Instead of providing a callback function to .then(), you're passing in the output of console.log("second:" + new Date().getTime()) (which is why second gets printed immediately).

Make an anonymous function that wraps the code that you want to call (just like you did in .success()):

$.getJSON("/echo/json").success(function(data) {
  console.log("first: " + new Date().getTime());
}).then(function() {
  console.log("second:" + new Date().getTime())
});

Demo: http://jsfiddle.net/Blender/fJb7h/

answered Jan 05 '13 at 13:55

Blender

289,723
53
439
496

Best answer because the miliseconds along the output are making it a lot clear – HN Singh Feb 06 '19 at 12:27
this, but inner from a function and a return value? – Jorhel Reyes Jun 25 '20 at 06:46

score 1 · Answer 2 · answered Jul 05 '18 at 19:10

Try with this:

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON( "example.json", function() {
  console.log( "success" );
})
  .done(function() {
    console.log( "second success" );
  })
  .fail(function() {
    console.log( "error" );
  })
  .always(function() {
    console.log( "complete" );
  });

// Perform other work here ...

// Set another completion function for the request above
jqxhr.complete(function() {
  console.log( "second complete" );
});

Reference: https://api.jquery.com/jquery.getjson/

jQuery promise with getJSON and callback

2 Answers2