How to use correctly Deferrers?

Question

var numerodepuntos;
$.when($.get('/u2', function(ospuntosyou) {
    numerodepuntos = parseFloat($(ospuntosyou).find('#field_id-13 dd').text());
    console.log('Esto: '+numerodepuntos)
})).done(console.log('Esto: '+numerodepuntos));

I'm trying to use this code and get a variable from the ajax request, but the second console.log returns undefined, like it was loaded instantly, instead of after $get finishes.

Why are you doing `console.log('Esto: '+numerodepuntos)` twice? — olive_tree, Aug 13 '14 at 17:44

Sean Vieira · Answer 1 · 2014-08-13T17:49:39.160

The problem is that JavaScript is not Scala - there is no pass-by-name. So the console.log in .done(console.log(...)) gets executed immediately after $.when is executed and the result of that call is passed to done (e. g. undefined).

Wrap your final done call in a function and things will work:

$.when($.get('/u2', function(ospuntosyou) {
    var numerodepuntos = parseFloat($(ospuntosyou).find('#field_id-13 dd').text());
    console.log('Esto: '+numerodepuntos);
    return numerodepuntos;
})).done(function doneCallback(numerodepuntos) {
    console.log('Esto: '+numerodepuntos);
});

It's worth noting that all of this can also be significantly simplified:

$.get('/u2', function getCallback(ospuntosyou) {
  var numerodepuntos = parseFloat($(ospuntosyou).find('#field_id-13 dd').text());
  console.log('Esto: '+numerodepuntos);
  return numerodepuntos;
}).done(function doneCallback(numerodepuntos) {
    console.log('Esto: '+numerodepuntos);
});

sifriday · Accepted Answer · 2014-08-13T17:49:24.140

'done' expects a function very similar to the success function in your $.get. I'd also suggest you split it into parts to make your code less indented. Here it is in your pattern:

var numerodepuntos;
var promise = $.get('/u2', function(ospuntosyou) {
    numerodepuntos = parseFloat($(ospuntosyou).find('#field_id-13 dd').text());
    console.log('Esto: '+numerodepuntos)
})
promise.done(function(ospuntosyou) {
   numerodepuntos = parseFloat($(ospuntosyou).find('#field_id-13 dd').text());
   console.log('Esto: '+numerodepuntos));
}

But of course because the done function is the same as the success function, all you need is this:

var promise = $.get('/u2')
promise.done(function(ospuntosyou) {
   var numerodepuntos = parseFloat($(ospuntosyou).find('#field_id-13 dd').text());
   console.log('Esto: '+numerodepuntos));
}

There's no reason to use `$.when()` on a single promise. Just use `.done()` on the promise itself. — jfriend00, Aug 13 '14 at 17:47

score 0 · Answer 3 · edited May 23 '17 at 12:20

I'd suggest you use only promises or only success handlers, not a mixture of both and you will not create this type of confusion. For example, I'm not sure whether there is an internal specification in jQuery for whether callbacks or promises are executed first. In either case, you should not rely on timing between them.

Here's a method that only uses promises which will not have that problem.

$.get('/u2').done(function(ospuntosyou) {
    var numerodepuntos = parseFloat($(ospuntosyou).find('#field_id-13 dd').text());
    console.log('Esto: '+numerodepuntos)
});

Note - I declared numerodepuntos inside the .done() handler and this is important because of the uncertainty of the timing for when that variable is filled in from outside the .done() handler, you should only use that result inside the .done() handler or in a function that you call and pass the data to from there. If you're confused about that, then read this reference on returned data from ajax calls:

How do I return the response from an asynchronous call?

FYI, there is no reason to use $.when() on a single promise. You can just use the methods on the promise returned by $.get() directly and this avoids asking $.when() to create yet another promise.

How to use correctly Deferrers?

3 Answers3