jQuery deferred : use to delay return of function until async call within function complete + get return value
Solution 1
The only way to delay the return of your getFields
function would be to set the AJAX async
property to false:
var ajaxPromise = $.ajax(
{
url: page,
async: false // make the call synchronous
}
);
But the jQuery documentation notes that this is deprecated from 1.8 onwards (i.e. it's use is discouraged).
Deferreds don't make AJAX synchronous, instead they make it easier to work with callbacks and asynchronous methods.
From what I can tell of what you're trying to it might work better to do something like this:
function getFields(page)
{
var ajaxPromise = $.ajax( //the async call
{
url: page
}
);
var dff = $.Deferred();
ajaxPromise.then(function(data){
// Possibly access the loaded data in this function.
var result = {
'field1' : field1,
'field2' : field2
};
// Notify listeners that the AJAX call completed successfully.
dff.resolve(result);
}, function(){
// Something went wrong - notify listeners:
dff.reject(/* possibly pass information about the error */);
});
return dff.promise();
}
Then use the promise object like this:
var fieldPromise = getFields('http://something');
fieldPromise.done(function(result){
console.log(JSON.stringify(result));
});
Note that getFields
returns a Promise
object immediately but you have to wait for the promise to be resolved before you can log out the result.
Solution 2
Here's the basic idea of deferreds: you're returned an object, and you can use it to define functions that will be called when the return value comes back. So you could do something like:
function getFields(page)
{
return $.ajax(page);
}
Then you can call it and specify a function to be called when the XHR call completes:
var jqXHR = getFields("/path/to/call");
jqXHR.done(function (data) { alert(JSON.stringify(data); });
The object is chainable, so you can just do this:
getFields("/path/to/call")
.done(function (data) { alert(JSON.stringify(data); });
Note that the jqXHR object returned by $.ajax
is a Deferred-compatible object, so you can read the documentation at http://api.jquery.com/category/deferred-object/.
I'm not sure what you meant by your sample code (since it doesn't actually use the Ajax call) but maybe you meant something like this:
function getFields()
{
var df = $.Deferred();
window.setTimeout(function () {
df.resolve({field1: "value1", field2: "value2"});
}, 1000);
return df.promise();
}
getFields().done(function (data) { console.log(JSON.stringify(data)); });
This will print your desired value a second after you run it.
Related videos on Youtube
Comments
-
bguiz almost 2 years
How can I correctly use jQuery deferreds to delay return of function until async call within function complete + get return value?
This is my current code:
function getFields(page) { var dff = $.Deferred(); result = {}; $.ajax( //the async call { url: page, success: function (data) { //work out values for field1 & field 2 from data here result = { 'field1' : field1, 'field2' : field2 }; }, complete: function() { dff.resolve(result); //my attempt to return the result } } ); return dff.promise(); }
I want this to print {"field1":"value1","field2":"value2"}
var result = getFields('http://something'); console.log(JSON.stringify(result));
However, the value of result appears to be a jQuery object - so I'm doing something wrong, but what?
Thanks!
P.S. Sorry for the newbie question, I am a first time user of deferreds, so I am still grasping the basic concepts.
-
bguiz almost 12 years@ Sly_caridnal : +1 and check - great explanation!
-
Izkata over 10 yearsOooh, nice... Wrapping
dff.resolve(data);
in asetTimeout
is a fast and easy way to simulate a slow ajax call (since what I'm testing doesn't consistently finish before or after a second ajax call) -
shuangwhywhy over 8 yearsThere is a way actually: change
getFields(page)
function's return statement likereturn dff.promise().getState() == 'resolved'
It will pause until resolve or reject happens. Of course you can just return the promise object itself and check the state somewhere else. -
chukko about 8 years@shuangwhywhy - there is no getState() method, only state() and it does not pause at all. It just returns "pending".