We Keep Coding

Function returning before jQuery promise within promise is resolved

I have a function which calls dealCardSelectableAI(), which sets up a number of jQuery deferred promises. The function setCardName() is then called from within it. Once both functions complete their tasks saveGame() should then be triggered.
Everything works, except setCardName() does not complete before saveGame() is triggered. It appears that deferredQueue.push(setCardName(system, result)); is not operating as I expected. I am not sure where I'm going wrong or how to resolve the issue.
var setCardName = function (system, card) {
var deferred = $.Deferred();
require(["cards/" + card[0].id], function (data) {
var cardName = loc(data.summarize());
system.star.ai().cardName = ko.observable(cardName);
deferred.resolve();
});
return deferred.promise();
};
var dealCardSelectableAI = function (win, turnState) {
var deferred = $.Deferred();
// Avoid running twice after winning a fight
if (!win || turnState === "end") {
var deferredQueue = [];
_.forEach(model.galaxy.systems(), function (system, starIndex) {
if (
model.canSelect(starIndex) &&
system.star.ai() &&
system.star.ai().treasurePlanet !== true
) {
deferredQueue.push(
chooseCards({
inventory: inventory,
count: 1,
star: system.star,
galaxy: game.galaxy(),
addSlot: false,
}).then(function (result) {
deferredQueue.push(setCardName(system, result));
system.star.cardList(result);
})
);
}
});
$.when(deferredQueue).then(function () {
deferred.resolve();
});
} else {
deferred.resolve();
}
return deferred.promise();
};
dealCardSelectableAI(false).then(saveGame(game, true));

Your code says call saveGame() and what is returned from the function call should be set to then. It is not saying, "call saveGame when done"
dealCardSelectableAI(false).then(function () { saveGame(game, true) });

Completing Promises after runs/waitsFor in Jasmine 1.3

I'm using jasmine-node 1.14.5, which underneath uses jasmine 1.3, and I'm having issues getting runs/waitFor to work properly with Promises.
In certain tests, I'd like to runs/waitFor to wait for a particular condition to happen, and when it occurs, fulfil a Promise that I return back. However, the moment I attempt to construct a Promise passing in the function(success, fail) parameter, none of the code inside the runs/waitFor gets called. However, if the Promise is resolved directly, it works. Any idea the former option does not work?
To give some examples, the following works fine:
it("should support async execution of test preparation and expectations", function(done) {
var p = Promise.resolve("boo")
.then(function() {
var p2 = Promise.resolve("whatever");
runs(function() {
flag = false;
value = 0;
intId = setInterval(function() {
console.log(value);
if (++value == 3) { clearInterval(intId); flag = true; }
}, 500);
});
waitsFor(function() {
return flag;
}, "The Value should be incremented", 5000);
runs(function() {
expect(value).toEqual(3);
});
return p2;
});
p.then(function() {
done();
}).catch(function(err) {
done(err);
});
});
But on the other hand, this does not work because although runs/waitsFor are called without problems, the callbacks inside do not:
it("should support async execution of test preparation and expectations", function(done) {
var p = Promise.resolve("boo")
.then(function() {
return new Promise(function (fulfil, reject) {
runs(function () {
flag = false;
value = 0;
intId = setInterval(function () {
console.log(value);
if (++value == 3) {
clearInterval(intId);
flag = true;
}
}, 500);
});
waitsFor(function () {
return flag;
}, "The Value should be incremented", 5000);
runs(function () {
expect(value).toEqual(3);
fulfil();
});
});
});
p.then(function() {
done();
}).catch(function(err) {
done(err);
});
});
I've also tried the following in the off chance but does not work either, it behaves the same way as the previous example:
it("should support async execution of test preparation and expectations", function(done) {
var p = Promise.resolve("boo")
.then(function() {
var outerFulfil;
var outerReject;
var p2 = new Promise(function(fulfil, reject) {
outerFulfil = fulfil;
outerReject = reject;
});
runs(function() {
flag = false;
value = 0;
intId = setInterval(function() {
console.log(value);
if (++value == 3) { clearInterval(intId); flag = true; }
}, 500);
});
waitsFor(function() {
return flag;
}, "The Value should be incremented", 5000);
runs(function() {
expect(value).toEqual(3);
outerFulfil();
});
return p2;
});
p.then(function() {
done();
}).catch(function(err) {
done(err);
});
});
Any idea how to solve it? Although the first example works, it does not behave the way I want because I only want the promise to be fulfilled once the assertions after the waitsFor have been carried out.
Cheers,
Galder

I ended up ditching runs/waitsFor altogether, and instead do a time based recursive Promise loop, e.g.
function waitUntil(expectF, cond, op) {
var now = new Date().getTime();
function done(actual) {
return cond(actual)
&& new Date().getTime() < now + MAX_WAIT;
}
function loop(promise) {
exports.sleepFor(100); // brief sleep
// Simple recursive loop until condition has been met
return promise
.then(function(response) {
return !done(response)
? loop(op())
: response;
})
.catch(function() {
return loop(op());
});
}
return loop(op())
.then(function(actual) {
expectF(actual);
});
}
op is an operation that returns a Promise.
For example, I wanted to wait until certain number of nodes have joined a cluster:
function waitUntilView(expectNumMembers, nodeName) {
return waitUntil(
function(members) { expect(members.length).toEqual(expectNumMembers); },
function(members) { return _.isEqual(expectNumMembers, members.length); },
getClusterMembers(nodeName)
);
}

How to structure javascript callbacks in a chain of dependant functions?

I have only used simple callbacks, i.e. function that performs async AJAX call and calls back once done. Whenever things got anymore complicated I have used $.Deferred(). The problem is that handling promises is a lot of code every time, i would like to know how to use callbacks correctly instead.
Here is my example. (the problem arises in the return from secondary()):
function primary()
{
//call secondary with self as callback
var data = secondary("someStr", primary);
if (data !== false) {
//logic that uses data
}
}
function secondary(str, callback)
{
//call the third function. Since we need parameters
//on the callback, we create anon function
var returnFromThird = tertiary(function() {
secondary(str, callback);
});
if (returnFromThird !== false) {
//when we have data from third do someting....
//but here lies the problem, how do i callback primary()?
return returnFromThird + " " + str;
} else {
//third is not yet ready
return false;
}
}
var myVar3 = null;
function tertiary(callback)
{
if (myVar3 === null) {
//do async ajax call that sets myVar3 value
var ajaxRequest = $.ajax({
url: "/someUrl",
type: "POST",
data: {myData : "blabla"},
async: true,
});
ajaxRequest.done(function(data) {
myVar3 = data;
//issue the call back, so secondary() can come get myVar3
callback();
});
//we did not have the required data so we return false
return false;
} else {
return myVar3;
}
}
//execute
primary();
Here is how i would normally handle the issue using JQuery Deferred:
function primary()
{
var promise = secondary(str);
$.when(promise).then(
function (data) {
//logic that uses data
}
);
}
function secondary(str)
{
var dfd = $.Deferred();
var promise = tertiary();
$.when(promise).then(
function (data) {
dfd.resolve(data + " " + str);
}
);
return dfd.promise();
}
var myVar3 = null;
function tertiary()
{
var dfd = $.Deferred();
if (myVar3 === null) {
var ajaxRequest = $.ajax({
url: "/someUrl",
type: "POST",
data: {myData : "blabla"},
async: true,
});
ajaxRequest.done(function(data) {
myVar3 = data;
dfd.resolve(myVar3);
});
} else {
dfd.resolve(myVar3);
}
return dfd.promise();
}
primary();

If you are using callbacks, you should always call the callback, not sometimes return a value:
var myVar3 = null;
function tertiary(callback) {
if (myVar3 === null) {
//do async ajax call that sets myVar3 value
$.post("/someUrl", {myData : "blabla"}).done(function(data) {
myVar3 = data;
callback(data); // just pass the data to the callback
});
} else {
return callback(myVar3); // always call the callback with the data
}
}
Now your other functions would look like this:
function primary() {
secondary("someStr", function(data) {
//logic that uses data
});
}
function secondary(str, callback) {
tertiary(function(returnFromThird) {
callback(returnFromThird + " " + str);
})
}
But you are right, you should be using promises, it simplifies this a great lot:
var myVarPromise = null;
function tertiary() {
if (myVarPromise === null)
myVarPromise = $.post("/someUrl", {myData : "blabla"});
return myVarPromise;
}
function primary() {
return secondary("someStr").then(function(data) {
//logic that uses data
});
}
function secondary(str) {
return tertiary().then(function(returnFromThird) {
return returnFromThird + " " + str;
});
}

AngularJS: how to call recursive function with a delay?

I have such function:
$scope.getContactsByScroll = function() {
$scope.pageN = $scope.pageN + 1;
if (!$scope.allDataIsLoaded){
fetchMyDataService.getContactsByScrollService($scope.pageN).then(function(response) {
if (response.length === 0){
$scope.allDataIsLoaded = true;
}
else if (response.length !== 0 && !$scope.allDataIsLoaded){
angular.forEach(response, function(el) {
$scope.contacts.push(el);
});
//$timeout(function() {
$scope.getContactsByScroll();
//}, 2000);
}
}).catch(function() {
$scope.allDataIsLoaded = true;
});
}
};
but it call themselves several times even, if $scope.allDataIsLoaded is false
when i set timeout: all works like a charm. But i don't think that this is a good solution. How can i delay my function without a timeout?

Using timeout in asynchronous functions is not a good idea:
If your request time is longer then timeout, then you'll get unnecessary requests.
If your timeout is bigger then request time, then you'll get unnecessary lags.
You should use promise chain for reqursive requests. Try something like this:
var asyncService = function ($timeout)
{
var someData = 10;
var service =
{
FetchData: function (someArray)
{
someData++;
//timeout here is just for demonstration of async request
return $timeout(function () { return someData }, 1000)
.then(function (result)
{
return service.ProcessData(result, someArray);
});
},
ProcessData: function (data, someArray)
{
console.log(data);
if (data == 15)
{
return someArray;
}
else
{
someArray.push(data)
return service.FetchData(someArray);
}
}
};
return service;
}
Here's a plunker with demonstration

Wait for completion after multiple promises in parallel using jQuery

I want to queue multiple asynchronous ajax requests using deferred/promise implementation of jquery:
function doSomething() {
console.log('doSomething')};
function makeMultiAjaxRequests1() {
console.log('makeMultiAjaxRequests1')};
function makeMultiAjaxRequests2() {
console.log('makeMultiAjaxRequests2')};
var step1 = function () {
var promise = new $.Deferred().promise();
makeMultiAjaxRequests1();
return promise; }
var step2 = function () {
var promise = new $.Deferred().promise();
makeMultiAjaxRequests2();
return promise; }
step1()
.then(step2())
.done(doSomething());
$.when(step1(),
step2())
.done(function () {
doSomething();
});
Here is the fiddle link. So my question is:
In the pattern where step1 and step2 are executed in parallel, the code does not reach the last handler function. Why?

You need to resolve the deferred obj in step1 and step2
Try this
function doSomething() {
console.log('doSomething')};
function makeMultiAjaxRequests1(deferred) {
console.log('makeMultiAjaxRequests1')
deferred.resolve()};
function makeMultiAjaxRequests2(deferred) {
console.log('makeMultiAjaxRequests2')
deferred.resolve()};
var step1 = function () {
var deferred = new $.Deferred();
makeMultiAjaxRequests1(deferred);
return deferred; }
var step2 = function () {
var deferred = new $.Deferred();
makeMultiAjaxRequests2(deferred);
return deferred; }
step1().then(step2).done(doSomething);
$.when(step1(), step2()).done(function () {
doSomething();
});

#Daiwei gives a good answer.
A common gist to be referred to is https://gist.github.com/sergio-fry/3917217 by sergio-fry.
Should you want to have a more dynamic approach where you don't know beforehand how many arguments you are running parallel, here is a good example extension of JQuery (1.10+):
$.whenAll = function (deferreds) {
function isPromise(fn) {
return fn && typeof fn.then === 'function' &&
String($.Deferred().then) === String(fn.then);
}
var d = $.Deferred(),
keys = Object.keys(deferreds),
args = keys.map(function (k) {
return $.Deferred(function (d) {
var fn = deferreds[k];
(isPromise(fn) ? fn : $.Deferred(fn))
.done(d.resolve)
.fail(function (err) { d.reject(err, k); })
;
});
});
$.when.apply(this, args)
.done(function () {
var resObj = {},
resArgs = Array.prototype.slice.call(arguments);
resArgs.forEach(function (v, i) { resObj[keys[i]] = v; });
d.resolve(resObj);
})
.fail(d.reject);
return d;
};
See the code in action with a dynamic live example:
http://jsbin.com/nuxuciwabu/edit?js,console

It does reach your done function if you give it a URL it can actually reach (in the case of jsfiddle, that would be say /echo/html/: http://jsfiddle.net/LnaPt/2/
Basically, you just need to do this:
var promise = $.ajax({
type: "GET",
url: "/echo/html/", //<-- instead of google
}).promise();