Jquery Deferred Not reaching last .then - javascript

I have a sequence of functions that must be executed. They all execute sequentially except the last one. d1 executes, d2 executes, d3 executes then the code inside the done function executes before the resolve of d4. Can't figure out why. Any help would be appreciated.
$(document).ready(function() {
var d1 = functiond1();
var d2 = functiond2();
var d3 = functiond3();
var d4 = functiond4();
d1.then(d2).then(d3).then(d4).done(function() {
//Code here does not wait for d4 to end before executing
//HELP!
});
});
function functiond1() {
var dfd = $.Deferred();
//Do stuff here
//Works in sequence
dfd.resolve();
return dfd.promise();
}
function functiond2() {
var dfd = $.Deferred();
params = jQuery.param({
'parm1': 1,
'parm2': 2,
'parm3': 3
});
jQuery.getJSON($.webMethoJSONGet1, params).done(function(data) {
//Do stuff here
//Works in sequence
dfd.resolve();
});
return dfd.promise();
}
function functiond3() {
var dfd = $.Deferred();
//Do stuff here
//Works in sequence
dfd.resolve();
return dfd.promise();
}
function functiond4() {
var dfd = $.Deferred();
params = jQuery.param({
'parm1': 1,
'parm2': 2,
'parm3': 3
});
jQuery.getJSON($.webMethoJSONGet2, params).done(function(data) {
//Do stuff here
//does not work in sequence
dfd.resolve();
});
return dfd.promise();
}

It's hard to tell what you are trying to do with those promises. You first call all 4 functions, and then you try to chain them with a bunch of then callbacks. If you want to sequentially chain them together it should look like this:
functiond1()
.then(functiond2)
.then(functiond3)
.then(functiond4)
.done(function() { /* blah */ });
If you just want a result after all have completed you can use $.when
$.when(functiond1(), functiond2(), functiond3(), functiond4())
.then(function(resultd1, resultd2, resultd3, resultd4) { /* blah */ });
On another note, in your functions you create promises that are resolved inside the done callback of another promise which is unnecessary. The $.getJSON.done() calls return a promise themselves so an additional promise is not needed. Just return the promise returned from done().
Sorry, I haven't messed much with jQuery deferred objects, but they appear similiar enough to standard Promises.

To run the functions in sequence, you need to pass references to the functions within the .then chain, and not the results of calling those functions.
e.g.
var d1 = functiond1; // NB: no ()
...
d1.then(d2).then(d3).then(d4).done(...);
functiond1().then(functiond2).then(functiond3).then(functiond4).done(...)
The ultimate cause of your problem is that invoking d4 straight away will cause its resolved promise to pass-thru to .done immediately irrespective of the state of the earlier part of the .then chain.
You should also not wrap your JSON functions with additional promises, since $.getJSON already returns a promise that will be rejected if the AJAX query fails:
function functiond4() {
...
return $.getJSON(...);
}

I was facing the same issue on a project, this solution with an array works well:
$(document).ready(function() {
var pr = [];
var d1 = functiond1();
var d2 = functiond2();
var d3 = functiond3();
var d4 = functiond4();
function functiond1() {
var dfd = $.Deferred();
pr.push(dfd);
setTimeout(function(){
$('body').append('1 resolved <br>');
dfd.resolve();
}, 2000);
}
function functiond2() {
var dfd = $.Deferred();
pr.push(dfd);
params = jQuery.param({
'parm1': 1,
'parm2': 2,
'parm3': 3
});
setTimeout(function(){
$('body').append('2 resolved <br>');
dfd.resolve();
}, 3000);
}
function functiond3() {
var dfd = $.Deferred();
pr.push(dfd);
setTimeout(function(){
$('body').append('3 resolved <br>');
dfd.resolve();
}, 1000);
}
function functiond4() {
var dfd = $.Deferred();
pr.push(dfd);
params = jQuery.param({
'parm1': 1,
'parm2': 2,
'parm3': 3
});
setTimeout(function(){
$('body').append('4 resolved <br>');
dfd.resolve();
}, 50);
}
$.when.apply($, pr).then(function() {
// do something
$('body').append('proceed with code execution');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Related

.done function is not working with defer and promises

Things that I have tried: -
var dfd = $.Deferred();
$("#Index").click(function(){
dfd.resolve();
}).done(function(){
CallNextFunction();
})
I created a deferred object and when click is done, I want next function to be called but it never does.
Second Try
function CompletePage(){
var dfd = $.Deferred();
$("#Index").click(function(){
dfd.resolve();
});
return dfd.promise();
}
CompletePage().done(function(){
// Call Next Function();
});
This also does not work.

jQuery Promise/Deferred nicer Code than callbacks? How to achieve that?

I would like to show off how much cleaner jQuery deferred objects can make the code instead of using the "callback hell".
I have no option to switch to Javascript's Promises.
Here is the "bad" code:
/* Callback Hell !? */
// Main
var stringToProcess = "1,2,3,4,5,6";
console.debug("Main Stack: start");
convertStringToArray(stringToProcess, function (convertedString){
convertToObject(convertedString, function(objectOfStrings){
resetObjectValues(objectOfStrings, function(object){
console.debug(object);
});
});
});
console.debug("Main Stack: end");
// Functions
function resetObjectValues(object, callback){
for(var key in object){
object[key] = "X";
}
setTimeout(function thirdcb(){
callback(object);
}, 500);
}
function convertToObject(string, callback){
var object = {};
string.map(function(current, index){
object[index] = current;
});
setTimeout(function secondcb(){
callback(object);
}, 500);
}
function convertStringToArray(string, callback){
var delimiter = ",";
var arrayString = string.split(delimiter);
setTimeout(function firstcb(){
callback(arrayString);
}, 500);
}
And thats how I tried to make it better:
/* Promise Heaven... */
// Main
var stringToProcess = "1,2,3,4,5,6";
console.debug("Main Stack: start");
var promise;
promise = convertStringToArray(stringToProcess);
promise.done(function(string){
promise = convertToObject(string);
promise.done(function(object){
promise = resetObjectValues(object);
promise.done(function(object){
console.debug(object);
})
})
});
console.debug("Main Stack: end");
// Functions
function resetObjectValues(object, callback){
var deferred = $.Deferred();
for(var key in object){
object[key] = "X";
}
setTimeout(function thirdcb(){
deferred.resolve(object);
}, 500);
return deferred.promise();
}
function convertToObject(string){
var deferred = $.Deferred();
var object = {};
string.map(function(current, index){
object[index] = current;
});
setTimeout(function secondcb(){
deferred.resolve(object);
}, 500);
return deferred.promise();
}
function convertStringToArray(string){
var deferred = $.Deferred();
var delimiter = ",";
var arrayString = string.split(delimiter);
setTimeout(function firstcb(){
deferred.resolve(arrayString);
}, 500);
return deferred.promise();
}
...sadly the .done() code looks almost as bad as the "hell" one. I cannot figure our how to chain the returns of promises/deferred properly. I saw tutorials where they do it without arguments to the function calls. But I have arguments to throw in - so how to get along with that?
The chaining of promises should look somewhat like this:
convertStringToArray(stringToProcess)
.then(function(string){
return convertToObject(string);
})
.then(function(object){
return resetObjectValues(object);
})
.then(function(object){
console.debug(object);
});
Basically each (callback) function returns a new promise, which can then be used to attach others handlers to it. That way you don't need the nesting of callbacks like in your code.

got puzzled about promise in jQuery

1 the value can not change in promise
for example
var t = function(s) {
var wait = function(dtd) {    
var dtd = $.Deferred();
//new a Deferred object in function
    
var tasks = function() {      
alert("complete!");
s = s + "hhh";      
dtd.resolve(s); // change the state of deferred object      
};      
setTimeout(tasks, 5000);
// return promise object
return dtd.promise(s);
};
}
var s = "hhh";
$.when(t(s))
.then(function() {
alert(s);
}).then(function() {
alert(s);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
I can only got "hhh" instead of "hhhhhh"...
2
How to invoke promise chain with different values?like a.then(b(c)).then(f(d))
I put all values in a object and then pass it on chain...
The alert in your $.when is alerting the global variable not the resolve in tasks
Also , you never call wait() and tasks() doesn't return anything.
The return of the promise only returns to wait() which never gets called. Returning to the inner function does not return to the outer function
Also you have no arguments in then() to receive the resolved data.
In order to get data to the second then, you need to return something from the first one
var t = function (s) {
var wait = function () {    
var dtd = $.Deferred();
//new a Deferred object in function
    
var tasks = function () {      
alert("complete!");
s = s + "hhh";      
dtd.resolve(s); // change the state of deferred object      
};      
setTimeout(tasks, 2000);
// return promise object
return dtd.promise();
};
// return the promise inside `wait`
return wait()
}
var s = "hhh";
$.when(t(s)).then(function (resolvedData) {
// return to the next then...just because we can
return resolvedData; // must return something if want to access it in next then
}).then(function(previousThenData) {
alert(previousThenData);// alert argument
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

How to use $q.deffer to chain ajax requests?

I need to do this: browser have to make N requests to the server, requests mustn't be async, next requests are starting after previous requests will stop.
I can write some function A with for i < N i++ and calling this function A again recursively to do this, but it is not beautifull at all. Also, this called callback hell. I want some more beautifull solution.
I found deffered objects. Some says, it can help me to escape callback hell. I want something like this. setTimeout there is imitate one async request:
function foo1(some) {
debugger;
setTimeout(function foo1async() {
debugger;
deffered.resolve();
}, 500);
return deffered.promise;
}
function foo2(some) {
debugger;
setTimeout(function foo2async() {
debugger;
deffered.reject();
}, 500);
return deffered.promise;
}
function foo3() {
debugger;
setTimeout(function foo3async() {
debugger;
deffered.resolve();
}, 500);
return deffered.promise;
}
var deffered;
function doChain() {
debugger;
deffered = $q.defer();
var promise = deffered.promise;
promise.then(foo1);
promise.then(foo2);
promise.then(foo3);
promise["finally"](function () {
debugger;
});
deffered.resolve();
}
I expect foo1 to be called, then foo1async will be called and resolve deffered object.
foo2 must be called, then foo2async is called.
3.Now I expect, that foo3 wouldn't start, because deffered is rejected in foo2async. After that I expect foo in finally section called.
Actually, I have this:
foo1, foo2 and foo3 are called. Then foo in finally section called. Then foo1async, foo2async and foo3async funtions are called.
How I can get what I am expecting?
Actually, I will have something like this:
for(var i = 0; i < N; i++) {
(function (iter) {
promise.then(function () {
foo(iter);
});
})(i);
}
You got a few things wrong here.
First, you use a deferred to convert a callback-based async function into a promise-based - but each one needs its own deferred.promise and thus its own deferred. Actually, I prefer to use the $q constructor instead:
function fooN(input){
return $q(function(resolve, reject){
setTimeout(function(){
resolve(input + "; some more data");
}, 500);
});
}
(you could use var deferred = $q.defer() as well)
fooN now returns a promise, so you don't need to use $q.defer() anymore.
In fact, if the async function already was promise-based, like $timeout or $http, then you wouldn't have needed a deferred at all, for ex:
function fooN(input){
return $timeout(function(){
return input + "; some more data";
}, 500);
})
So, let's assume that foo1, foo2 and foo3 are implemented like fooN - all returning promises.
To make the calls sequential, you would need to chain promises - not to attach multiple handlers to the some root promise.
I'll break it down for you:
function doChain(){
var foo1Promise = foo1();
var foo2AfterFoo1Promise = foo1Promise.then(foo2);
var foo3AfterFoo2Promise = foo2AfterFoo1Promise.then(foo3);
var promise = foo3AfterFoo2Promise.then(function(finalData){
return doSomeProcessing(finalData); // if needed
});
promise.catch(function(error){
// "rethrow", if can't handle
return $q.reject({msg: "Some error occurred"});
})
return promise;
}
Or, the same, more concise:
function doChain(p){
return foo1(p)
.then(foo2)
.then(foo3)
.then(function(finalData){
return doSomeProcessing(finalData);
})
.catch(function(error){
return $q.reject({msg: "Some error occurred"});
});
}
A "promised" return value of each function is an input to the next chained function.
You can use $q.all method. For instance:
var promises = [promise1, promise2, ...];
$q.all(promises).then(function () {
// do something
});
What happens now is that all foo* promises depend on the single promise; when it gets resolved all are triggered. In ASCII art the dependencies are:
┎ foo1
promise ╁ foo2
┖ foo3
What you want is:
function doChain() {
foo1()
.then(foo2)
.then(foo3)
;
}
No need for the extra promise. No callback hell either!

jQuery deferred and promise not work corectly

I have this code:
var d = $.Deferred();
var promise = d.promise();
//
promise = promise.then(function(){
var t = new $.Deferred();
var cont = $('.cont').find('> div');
requirejs(["transit"], function(){
cont.transit({opacity: .4});
//
setTimeout(function(){
cont.remove();
return t.promise();
}, 500);
});
});
//
promise.then(function() {
console.log('test');
});
//
d.resolve();
I wanna to fire up some action after another. But i need to be shure that the first one is finished. So i use promise and deferred methods. Something is not right bc second action starts before defined timeout delay. What is wrong? Can anybody help?
chain does not correctly setup?
The t promise has not been returned to the chain of d.
Modified code
var d = $.Deferred();
var promise = d.promise();
//
promise = promise.then(function(){
var t = new $.Deferred();
console.log('1st promise callback');
//var cont = $('.cont').find('> div');
setTimeout(function(){
//requirejs(["transit"], function(){
//cont.transit({opacity: .4});
//
console.log('timeout 1 func');
setTimeout(function(){
console.log('timeout 2 func');
//cont.remove();
t.resolve(true);
}, 10);
},30);
return t.promise();
});
//
promise.then(function() {
console.log('test');
});
//
d.resolve();
Output
1st promise callback (index):27
timeout 1 func (index):33
timeout 2 func (index):36
test
fiddle here
Why not use the $.when
$.when(function).done(function( x ) {
console.log('test');
});
You are using some Kind of non-Jquery, asynchronous (which is completely unnecessary if you already have jQuery) function- as asynchronous operations run on a separate thread the caller will finish nigh-instantly. If you really want to ensure sequential execution you may simply use a proper jQuery UI method (like animate : http://api.jquery.com/animate/) and add a complete-handler, as documented in the link

Categories