I am writing a function that makes a http call to a web service, grabs some data and calls another function based on this data. If the service is down, the second function should not be called. I thought the obvious way to do this would be to write $.when(func1()).done(func2); but this will trigger func2 even when the request is aborted. I realise that I can do a workaround by calling func2 within the success function of func1's $.getJSON method, but I would like to use the deferred syntax if possible. Can anyone suggest how to handle this in a way that is consistent with the deferred object syntax?
function checker() {
console.log("in checker");
$.getJSON("http://djdjdjdjdjinvalidUrl.dkdkdk", function(data) {
console.log("in success function");
});
}
function crosser(data) {
console.log("in crosser");
}
$(document).ready(function(){
$.when(checker()).done(crosser);
});
See jsFiddle for a live example.
you need to return a promise from checker
function checker() {
console.log("in checker");
return $.getJSON("http://djdjdjdjdjinvalidUrl.dkdkdk", function(data) {
console.log("in success function");
});
}
Demo: Fiddle
Also there is no need to use $.when()
$(document).ready(function(){
checker().done(crosser);
});
Demo: Fiddle
For asynchronous events like $.getJSON, you need to use the actual deferred object. I've updated your jsfiddle with this object in use: http://jsfiddle.net/wM7aP/1/
Code:
function checker() {
var dfd = new jQuery.Deferred();
console.log("in checker");
$.getJSON("http://djdjdjdjdjinvalidUrl.dkdkdk", function(data) {
//handle data here
dfd.resolve( "hurray" );
});
return dfd.promise();
}
function crosser(data) {
console.log("in crosser");
}
$(document).ready(function(){
$.when(checker()).done(crosser);
});
Related
I'm having a problem with callback functions in javascript. What I want to do is: loop on a for and call a function passing i as parameter. With that in mind, I have to loop to the next interaction only after the previous one has been finished. I don't know if this is a problem but inside the function I'm sending i as parameter, I have another callback function. Here is my code:
for(i=0; i<10; i++) {
aux(i, function(success) {
/*
* this should be made interaction by interaction
* but what happens is: while I'm still running my first interaction
* (i=0), the code loops for i=1, i=2, etc. before the response of
* the previous interaction
*/
if(!success)
doSomething();
else
doSomethingElse();
});
}
function aux(i, success) {
... //here I make my logic with "i" sent as parameter
getReturnFromAjax(function(response) {
if(response)
return success(true);
else
return success(false);
});
});
function getReturnFromAjax(callback) {
...
$.ajax({
url: myUrl,
type: "POST",
success: function (response) {
return callback(response);
}
});
}
jQuery's Deferred can be a bit tricky to get right. What you'll have to do is stack your promises in a chain. For example:
var
// create a deferred object
dfd = $.Deferred(),
// get the promise
promise = dfd.promise(),
// the loop variable
i
;
for(i = 0; i < 10; i += 1) {
// use `then` and use the new promise for next itteration
promise = promise.then(
// prepare the function to be called, but don't execute it!
// (see docs for .bind)
aux.bind(null, i, function(success) {
success ? doSomethingElse() : doSomething();
})
);
}
// resolve the deferred object
dfd.resolve();
for this to work, aux must also return a promise, but $.ajax already does this, so just pass it through and everything should work:
in aux:
function aux(i, callback) {
console.log('executing for `aux` with', i);
// return the ajax-promise
return getReturnFromAjax(function(response) {
callback(Boolean(response));
});
}
in getReturnFromAjax:
function getReturnFromAjax(callback) {
// return the ajax-promise
return $.ajax({
url: '%your-url%',
type: '%method%',
success: function (response) {
callback(response);
}
});
}
demo: http://jsbin.com/pilebofi/2/
I'd suggest that you'd look into jQuery's Deferred Objects and jQuery.Deferred()-method instead of making your own callback queue functions (as you are already using jQuery anyway).
Description: A constructor function that returns a chainable utility
object with methods to register multiple callbacks into callback
queues, invoke callback queues, and relay the success or failure state
of any synchronous or asynchronous function.
I don't have experience with jQuery, but your callback looks a bit fishy to me.
In plain JS I'd suggest trying something among the lines of this:
function yourMainFunction
{
function callbackHandler(result)
{
// Code that depends on on the result of the callback
}
getAjaxResults(callbackHandler);
}
function getAjaxResults(callbackHandler)
{
// Create xmlHttpRequest Handler, etc.
// Make your AJAX request
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4 && xmlHttp.status==200)
{
// Do stuff you want to do if the request was successful
// Define a variable with the value(s) you want to return to the main function
callbackHandler(yourReturnVariable);
}
}
}
I need to run a series of calls over websockets via Socket.IO (client-side). Since I'm not using $.ajax, jQuery's deferred functions won't integrate as well and I'll have to manually handle promises. With every websocket call, I pass a callback and I'm quickly seeing how this project could spiral out of control. Here's a simplified example of how my websocket calls work (excluding all connection handling code):
function js2node(nodeFunction, data, callback){
socket.emit('incoming', nodeFunction, data, callback);
}
function sampleServerCall(){
js2node('sampleCall', 'something', 'sampleCallback');
}
function sampleCallback(json){
// Handle data
}
sampleServerCall();
I will be talking to the server quite a bit, all calls will be asynchronous, but some will need to come back in a specific order. Enter jQuery deferred. Here is some working code:
var deferredArray = [];
$(function(){
$.when( // Any order
getData1(),
getData2()
).then(function(){ // Must have responses from dataCallback1 and dataCallback2 before doing this...
$.when( // Any order
getData3(),
getData4()
).then(function(){ // Must have responses from dataCallback3 and dataCallback4 before doing this...
getData5();
});
});
});
function getData1(){
js2node('data1', 'something', 'dataCallback1');
deferredArray[0] = new $.Deferred();
return deferredArray[0].promise();
}
function getData2(){
js2node('data2', 'something', 'dataCallback2');
deferredArray[1] = new $.Deferred();
return deferredArray[1].promise();
}
function getData3(){
js2node('data3', 'something', 'dataCallback3');
deferredArray[2] = new $.Deferred();
return deferredArray[2].promise();
}
function getData4(){
js2node('data4', 'something', 'dataCallback4');
deferredArray[3] = new $.Deferred();
return deferredArray[3].promise();
}
function getData5(){
js2node('data5', 'something', 'dataCallback5');
deferredArray[4] = new $.Deferred();
return deferredArray[4].promise();
}
function dataCallback1(json){
// Handle data
deferredArray[0].resolve();
}
function dataCallback2(json){
// Handle data
deferredArray[1].resolve();
}
function dataCallback3(json){
// Handle data
deferredArray[2].resolve();
}
function dataCallback4(json){
// Handle data
deferredArray[3].resolve();
}
function dataCallback5(json){
// Handle data
deferredArray[4].resolve();
}
As you can see, I'm still stuck with nested callbacks from the way I'm using when/then and nesting could potentially go deeper as I add functionality. Deferred is a new concept to me but I've read it's supposed to help in situations such as this. I feel like there has to be a better way than what I'm currently doing. Can anyone help me set this up more efficiently?
You can do more with .then:
$(function(){
$.when(
doSock('data1', 'something'),
doSock('data2', 'something')
).then(function(data1, data2){
return $.when(
doSock('data3', 'something'),
doSock('data4', 'something')
);
}).then(function(data3, data4){
return doSock('data5', 'something');
});
});
That way your nesting never goes deeper than that.
(i used adeneo's helper method)
Using a better helper function sure would help, but you'd still have to structure the calls with $.when and $.then to execute them in the proper order
function doSock(nodeFunction, data) {
var def = new $.Deferred();
socket.emit('incoming', nodeFunction, data, function(received) {
def.resolve(received)
});
return def.promise();
}
$(function(){
$.when(
doSock('data1', 'something'),
doSock('data2', 'something')
).then(function(data1, data2){
$.when(
doSock('data3', 'something'),
doSock('data4', 'something')
).then(function(data3, data4){
doSock('data5', 'something');
});
});
});
I'm using pretty standard setup I think. A click on element to call a function that handles an ajax request.
My limited understanding of variable scope and callbacks when using asynchronous anything and trying to figure out jQuery deferreds is making my feeble brain hurt.
$('<div>')
.on({
click : function(){
console.log(
fetchMyData() // this will be 'undefined' but why?
)
}
})
function fetchMyData(){
$.ajax({
// ajax setup
})
.done(function(response){
console.log( response ); // shows 'hello' as expected
return response;
})
}
I get that the ajax call will not necessarily be done by the time I'm doing the console.log(), since it's asynchronous of course.
So how can I make it such that fetchMyData() will display the ajax result once it's ready?
You should change what fetchMyData function does. Try returning the promise object.
$('<div>').click(function()
{
var fetchMyDataPromise = fetchMyData() ;
fetchMyDataPromise.done(function(response)
{
console.log(response);
});
});
function fetchMyData()
{
return $.ajax({ // ajax setup });
}
You can use jQuery When like this :
$('<div>')
.on({
click : function() {
$.when(fetchMyData()).then(function(data) {
console.log(data);
});
}
});
function fetchMyData(){
return $.ajax({
// ajax setup
});
}
So how can I make it such that fetchMyData() will display the ajax result once it's ready?
You've already done that, in the .done callback. If you want fetchMyData to return the response, you have to use a synchronous call, which is usually not the right thing to do (because the UI will freeze until the response arrives).
Maybe you want to modify your function to take a callback:
function fetchMyData(thenDoThis){
$.ajax({
// ajax setup
}).done(thenDoThis)
}
function doSomethingWithResponse(response) {
// do something
}
Then call it like this:
fetchMyData(doSomethingWithResponse);
Or like this:
$('<div>').click(function() {
fetchMyData(function(response){
console.log(response);
});
});
I am not writing a plugin. I am just looking for a simple clean way to let myself know when a certain function has finished executing ajax calls or whatever.
So I have this:
function doSomething() {
...
getCauses("", query, function () {
alert('test');
});
...
}
function getCauses(value, query) {
//do stuff...
}
Of course the alert never happens. I have a $.ajax call inside getCauses and would like to alert or do some action after getCauses finishes executing and then running the line of code from where the function was called.
Ideas? Thanks.
You first need to add the parameter to getCauses:
function getCauses(value, query, callback) {
}
Then, inside of your $.ajax call, call the callback parameter in your AJAX completion callback:
$.ajax({
// ...
complete: function() {
// Your completion code
callback();
}
});
You're passing your callback function but not executing it.
function doSomething() {
...
getCauses("", query, function () {
alert('test');
});
...
}
function getCauses(value, query, callback) {
//do stuff...
//stuff is done
callback();
}
Just using a bit of javascript trickery, here's an implementation that will allow you to implement some default functionality, in the case that no callback is defined. This would be great if 99% of the time you want a generic callback, and then you simply want to customize it in a few places.
var my_callback = function() {
alert('I am coming from the custom callback!');
}
var special_function(string_1, callback) {
(callback || function() {
// Default actions here
alert('I am coming from the generic callback');
})();
}
// This will alert "I am coming from the custom callback!"
special_function("Some text here", my_callback);
// This will alert "I am coming from the generic callback"
special_function("Some text here");
// This will do nothing
special_function("Some text here", function() {});
Cheers!
var ajaxStuff = (function () {
var doAjaxStuff = function() {
//an ajax call
}
return {
doAjaxStuff : doAjaxStuff
}
})();
Is there any way to make use of this pattern, and fetch the response from a successful ajaxcall when calling my method? Something like this:
ajaxStuff.doAjaxStuff(successHandler(data){
//data should contain the object fetched by ajax
});
Hope you get the idea, otherwise I'll elaborate.
Two things:
1. Add a parameter to the doAjaxStuff function.
2. When invoking doAjaxStuff, pass in an anonymous function (or the name of a function)
var ajaxSuff = (function () {
var doAjaxStuff = function(callback) {
// do ajax call, then:
callback(dataFromAjaxCall);
}
return {
doAjaxStuff : doAjaxStuff
}
})();
// calling it:
ajaxStuff.doAjaxStuff(function(data){
//data should contain the object fetched by ajax
});
Just let doAjaxStuff accept a callback:
var doAjaxStuff = function(callback) {
// an ajax call
// Inside the Ajax success handler, call
callback(response); // or whatever the variable name is
}
Depending on your overall goals, you could also use deferred objects instead (or in addition). This makes your code highly modular. For example:
var doAjaxStuff = function() {
// $.ajax is just an example, any Ajax related function returns a promise
// object. You can also create your own deferred object.
return $.ajax({...});
}
// calling:
ajaxStuff.doAjaxStuff().done(function(data) {
// ...
});
I believe you need to read the jQuery docs for jQuery.ajax. You could make a call as simple as:
$.ajax('/path/to/file').success(function (data) {
doStuff();
})