We Keep Coding

Chaining jQuery promises

I wish to call dealCardSelectableAI(), have it chooseCards(), then use the output to set an observable system.star.cardList(), then call setCardName(). Once all this is done I want saveGame() to execute.
However, setCardName() is not completing before saveGame() is called, so apparently I can't push it into my deferredQueue via a .then().
I'm using jQuery due to working within an ES5 environment.
var setCardName = function (system, card) {
var deferred = $.Deferred();
require(["cards/" + card[0].id], function (data) {
var cardName = loc(data.summarize());
system.star.ai().cardName = 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 (card) {
system.star.cardList(card);
deferredQueue.push(setCardName(system, card));
})
);
}
});
$.when(deferredQueue).then(function () {
deferred.resolve();
});
} else {
deferred.resolve();
}
return deferred.promise();
};
dealCardSelectableAI(false).then(function () {
saveGame(game, true);
});
I tried resolving this by changing the function calls so setCardName() was chained following dealCardSelectableAI(). However, it relies on system.star.cardList() having been written, which in some circumstances had not yet been done.
Given the dependency system.star.cardList() has on chooseCards(), I cannot figure out how to make sure it has been written to before calling setCardName() in a way which blocks saveGame() until everything is done.

Repeating function with Promise in js using setTimeout

I have a small library with a single API function, start().
Once started, it should check a URL every 2 seconds and after some time the url-checker will resolve.
But I don't know how to implement the repeated setTimeout for a deferred function..I tried variations where the checkProgress() calls itself but then the promise isn't returned anymore.
Here's the code:
Lib.progressChecker = (function($) {
'use strict';
var api = {};
var checkProgress = function (url) {
var d = $.Deferred();
$.get(url).done(function(foo) {
if (foo === 'bar') {
//script is not finished yet
} else {
//finished, resolve and stop looping
d.resolve();
}
});
return d.promise();
};
api.start = function(projectId) {
var url = 'foobar/'+projectId;
var d = $.Deferred();
setTimeout(function(){
checkProgress(url).done(function () {
d.resolve();
});
}, 2000);
return d.promise();
};
return api;
}) (jQuery);

You can do it like this where you just resolve the first deferred when you see the $.get() returns the desired value and if not, you run it again:
Lib.progressChecker = (function($) {
'use strict';
var api = {};
api.start = function(projectId) {
var url = 'foobar/'+projectId;
var d = $.Deferred();
function next() {
setTimeout(function(){
$.get(url).then(function(foo) {
if (foo === 'bar') {
// continue checking
next();
} else {
// done now
d.resolve(foo);
}
}, function(err) {
// error so stop
// don't want to forever loop in an error condition
d.reject(err);
});
}, 2000);
}
next();
return d.promise();
};
return api;
}) (jQuery);
FYI, if you control the server end of things here, it looks like an ideal situation for a webSocket where, rather than polling every two seconds, you can tell the server you want to be notified when things change and the server can just tell you when something changes on the server side.

Call a method once all deferred completes?

I have this class:
(function(){
"use strict";
var FileRead = function() {
this.init();
};
p.read = function(file) {
var fileReader = new FileReader();
var deferred = $.Deferred();
fileReader.onload = function(event) {
deferred.resolve(event.target.result);
};
fileReader.onerror = function() {
deferred.reject(this);
};
fileReader.readAsDataURL(file);
return deferred.promise();
};
lx.FileRead = FileRead;
}(window));
The class is called in a loop:
var self = this;
$.each(files, function(index, file){
self.fileRead.read(file).done(function(fileB64){self.fileShow(file, fileB64, fileTemplate);});
});
My question is, is there a way to call a method once the loop has completed and self.fileRead has returned it's deferred for everything in the loop?
I want it to call the method even if one or more of the deferred fails.

$.when lets you wrap up multiple promises into one. Other promise libraries have something similar. Build up an array of promises returned by fileRead.read and then pass that array to $.when and hook up then/done/fail/always methods to the promise returned by .when
// use map instead of each and put that inside a $.when call
$.when.apply(null, $.map(files, function(index, file){
// return the resulting promise
return self.fileRead.read(file).done(function(fileB64){self.fileShow(file, fileB64, fileTemplate);});
}).done(function() {
//now everything is done
})

var self = this;
var processFiles = function (data) {
var promises = [];
$.each(files, function (index, file) {
var def = data.fileRead.read(file);
promises.push(def);
});
return $.when.apply(undefined, promises).promise();
}
self.processFiles(self).done(function(results){
//do stuff
});
$.when says "when all these promises are resolved... do something". It takes an infinite (variable) number of parameters. In this case, you have an array of promises;

I know this is closed but as the doc states for $.when: In the multiple-Deferreds case where one of the Deferreds is rejected, jQuery.when immediately fires the failCallbacks for its master Deferred. (emphasis on immediately is mine)
If you want to complete all Deferreds even when one fails, I believe you need to come up with your own plugin along those lines below. The $.whenComplete function expects an array of functions that return a JQueryPromise.
var whenComplete = function (promiseFns) {
var me = this;
return $.Deferred(function (dfd) {
if (promiseFns.length === 0) {
dfd.resolve([]);
} else {
var numPromises = promiseFns.length;
var failed = false;
var args;
var resolves = [];
promiseFns.forEach(function (promiseFn) {
try {
promiseFn().fail(function () {
failed = true;
args = arguments;
}).done(function () {
resolves.push(arguments);
}).always(function () {
if (--numPromises === 0) {
if (failed) {
//Reject with the last error
dfd.reject.apply(me, args);
} else {
dfd.resolve(resolves);
}
}
});
} catch (e) {
var msg = 'Unexpected error processing promise. ' + e.message;
console.error('APP> ' + msg, promiseFn);
dfd.reject.call(me, msg, promiseFn);
}
});
}
}).promise();
};

To address the requirement, "to call the method even if one or more of the deferred fails" you ideally want an .allSettled() method but jQuery doesn't have that particular grain of sugar, so you have to do a DIY job :
You could find/write a $.allSettled() utility or achieve the same effect with a combination of .when() and .then() as follows :
var self = this;
$.when.apply(null, $.map(files, function(index, file) {
return self.fileRead.read(file).then(function(fileB64) {
self.fileShow(file, fileB64, fileTemplate);
return fileB64;//or similar
}, function() {
return $.when();//or similar
});
})).done(myMethod);
If it existed, $.allSettled() would do something similar internally.
Next, "in myMethod, how to distinguish the good responses from the errors?", but that's another question :)

Can I report Q promise progress without creating a deferred?

I'm creating a promise by calling then.
Can I somehow report progress from inside it, or do I have to use Q.defer (which has notify)?
var promise = doSomething().then(function () {
// somehow report progress from here
});
promise.progress(function (p) {
console.log('progress', p);
});

Use deferred.notify()
It's been a while since this question had been asked, the Q library now support it.
var progress = 96;
deferred.notify(progress);
For example:
function doSomething() {
var deferred = Q.defer();
setTimeout(function() {
deferred.notify(10);
},500);
setTimeout(function() {
deferred.notify(40);
},1500);
setTimeout(function() {
deferred.notify(60);
},2500);
setTimeout(function() {
deferred.notify(100);
deferred.resolve();
},3500);
return deferred.promise;
}
doSomething()
.then(
function () {
// Success
console.log('done');
},
function (err) {
// There was an error,
},
function (progress) {
// We get notified of the progress as it is executed
console.log(progress);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/q.js/1.4.1/q.js"></script>
Progress Notification
It's possible for promises to report their progress, e.g. for tasks
that take a long time like a file upload. Not all promises will
implement progress notifications, but for those that do, you can
consume the progress values using a third parameter to then:
return uploadFile()
.then(function () {
// Success uploading the file
}, function (err) {
// There was an error, and we get the reason for error
}, function (progress) {
// We get notified of the upload's progress as it is executed
});
Like fail, Q also provides a shorthand for progress callbacks called
progress:
return uploadFile().progress(function (progress) {
// We get notified of the upload's progress
});
taken from the official readme

I'm not exactly sure what you mean by "creating a promise by calling then". I'm guessing you mean that you're returning a promise with a then defined? I.e,
var iAmAPromise = someOtherPromise.then(doSomething);
If this is the case then you can wrap the doSomething in a callback function with the appropriate notifications. A working example:
var Q = require('q');
function resolver(deferred){
return function(){
deferred.resolve('return value from initial promise');
}
}
function someOtherPromise( ms ) {
var deferred = Q.defer();
setTimeout( resolver(deferred) , ms );
return deferred.promise;
}
function doSomething(data, cb){
console.log('----- doing something with:', data);
var val = "Did something with: " + data;
cb(val);
}
function reportProgress(doSomething, notifierCb){
notifierCb('waiting on it');
return function(someOtherPromiseResponse){
console.log('--- got promise response: ', someOtherPromiseResponse);
notifierCb('got response', someOtherPromiseResponse);
console.log('--- do something with it');
notifierCb('doing something with it');
doSomething(someOtherPromiseResponse, function(val){
notifierCb('done, result was:', val);
});
};
}
function notifier(update, detail){
console.log('Notifier update:', update, detail||"");
}
function logError(err){
console.log('ERROR:', err);
}
var iAmAPromise = someOtherPromise(1000).then(reportProgress(doSomething, notifier)).catch(logError);
console.log(' (Am I a Promise?)', Q.isPromise(iAmAPromise));
I may have misunderstood your question though.

Turns out: no, I can't.
See also why it might not be a good idea after all.

Passing different arguments to deferred.resolve() for different handlers

I'm trying to sync up multiple ajax callbacks using jQuery.Deferrd objects. Obviously jQuery.when handles this for you however my code is architected in such a way that the ajax requests aren't called in the same method. So for example this is the flow:
// A Button is clicked
// Module 1 requests a snippet of html and updates the DOM
// Module 2 requests a different snippet of html and updates the DOM
I need both Modules to update the DOM at the same time meaning I need to ensure the callbacks are run after both requests have returned.
Module 1 and Module 2 need to be able to exist without each other and should have no knowledge of one another so the requests can't be made together using $.when(doMod1Request(), doMod2Request()).then(function () { ... }) and the callbacks should be independent too.
I've therefore written a wrapper around ajax which adds the callbacks to a deferred object and in a similar way to $.when resolves the deferred object once the ajax requests have returned the same number of times as the number of callbacks on the deferred object.
My dilemma is however deferred.resolve() can only be called with one set of arguments so each callback get's the same value.
e.g.
var deferred = new $.Deferred();
deferred.done(function (response) {
console.log(response); // <div class="html-snippet-1"></div>
});
deferred.done(function (response) {
console.log(response); // <div class="html-snippet-1"></div>
});
deferred.resolve('<div class="html-snippet-1"></div>');
Whereas I'd want something like this:
var deferred = new $.Deferred();
deferred.done(function (response) {
console.log(response); // <div class="html-snippet-1"></div>
});
deferred.done(function (response) {
console.log(response); // <div class="html-snippet-2"></div>
});
deferred.resolve(['<div class="html-snippet-1"></div>', '<div class="html-snippet-2"></div>']);
Is this possible or am I going about this incorrectly?

I'd say this is perfectly valid. Assuming your independent modules, you would do (with two Promises):
doMod1Request().done(doMod1Update);
doMod2Request().done(doMod2Update);
Now, if you want to to execute the updates together and only if the two requests both succeeded, just write
$.when(doMod1Request(), doMod2Request()).done(function(mod1result, mod2result) {
doMod1Update(mod1result);
doMod2Update(mod2result);
});
This only gets ugly if you call your resolve functions with multiple arguments, as jQuery is a bit inconsistent there and does not really distinguish multiple arguments from one array argument.
To uncouple them with that publish-subscribe pattern you are using, I'd recommend the following:
function Combination() {
this.deferreds = [];
this.success = [];
this.error = [];
}
Combination.prototype.add = function(def, suc, err) {
this.deffereds.push(def);
this.success.push(suc);
this.error.push(err);
};
Combination.prototype.start = function() {
var that = this;
return $.when.apply($, this.deferreds).always(function() {
for (var i=0; i<that.deferreds.length; i++)
that.deferreds[i].done(that.success[i]).fail(that.error[i]);
// of course we could also call them directly with the arguments[i]
});
};
// Then do
var comb = new Combination();
window.notifyModules("something happened", comb); // get deferreds and handlers
comb.start();
// and in each module
window.listen("something happended", function(c) {
c.add(doRequest(), doUpdate, doErrorHandling);
});

Let's assume your modules look something like this :
var MODULE_1 = function() {
function getSnippet() {
return $.ajax({
//ajax options here
});
}
return {
getSnippet: getSnippet
}
}();
var MODULE_2 = function() {
function getSnippet() {
return $.ajax({
//ajax options here
});
}
return {
getSnippet: getSnippet
}
}();
Don't worry if your modules are different, the important thing is that the getSnippet functions each return a jqXHR object, which (as of jQuery 1.5) implements the Promise interface.
Now, let's assume you want to fetch the two snippets in response to some event (say a button click) and do something when both ajax responses have been received, then the click handler will be something like this:
$("myButton").on('click', function(){
var snippets = [];
var promises_1 = MODULE_1.getSnippet().done(function(response){
snippets.push({
target: $("#div_1"),
response: response
});
});
var promise_2 = MODULE_2.getSnippet().done(function(response){
snippets.push({
target: $("#div_2"),
response: response
});
});
$.when(promise_1, promise_2).done(function() {
$.each(snippets, function(i, snippetObj) {
snippetObj.target.html(snippetObj.response);
});
});
});
Slightly more elaborate, and better if you have many similarly constructed modules to fetch many snippets, would be something like this:
$(function(){
$("myButton").on('click', function(){
var promises = [];
var snippets = [];
var modules = [MODULE_1, MODULE_2, MODULE_3 .....];
for (var i=1; i<=10; i++) {
promises.push(modules[i].getSnippet().done(function(response){
snippets.push({
target: $("#div_" + i),
response: response
};
}));
}
$.when.apply(this, promises).done(function() {
$.each(snippets, function(i, snippetObj) {
snippetObj.target.html(snippetObj.response);
});
});
});
});
As you can see, I've made heaps of assumptions here, but you should get some idea of how to proceed.

To ensure each callback is passed the appropriate arguments I've done the following:
var guid = 0,
deferreds = [];
window.request = function (url, deferred, success) {
var requestId = guid++;
if ($.inArray(deferred) === -1) {
deferreds.push(deferred);
$.extend(deferred, {
requestCount: 0,
responseCount: 0,
args: {}
});
}
deferred.requestCount++;
deferred
.done(function () {
// Corresponding arguments are passed into success callback using requestId
// which is unique to each request.
success.apply(this, deferred.args[requestId]);
});
$.ajax(url, {
success: function () {
// Store arguments on deferrds args obj.
deferred.args[requestId] = arguments;
deferred.responseCount++;
if (deferred.requestCount === deferred.responseCount) {
deferred.resolveWith(this);
}
}
});
};
So the arguments are managed through the closure. This allows me to ensure that both modules have no knowledge of each other and won't break if the other doesn't exist, e.g:
var MODULE_1 = function () {
$(".myButton").on('click', function() {
// Cross module communication is achieved through notifications.
// Pass along a new deferred object with notification for use in window.request
window.notify('my-button-clicked', new $.Deferred);
});
}();
var MODULE_2 = function () {
// run get snippet when 'my-button-clicked' notification is fired
window.listen('my-button-clicked', getSnippet);
function getSnippet (deferred) {
window.request('/module2', deferred, function () {
console.log('module2 success');
});
}
}();
var MODULE_3 = function () {
// run get snippet when 'my-button-clicked' notification is fired
window.listen('my-button-clicked', getSnippet);
function getSnippet (deferred) {
window.request('/module3', deferred, function () {
console.log('module3 success');
});
}
}();
The above allows each module to function independently meaning one will work without the other which loosely couples the code and because both MODULE_2 and MODULE_3 pass the same deferred object into window.request they will be resolved once both requests have successfully returned.
This was my final implementation:
https://github.com/richardscarrott/ply/blob/master/src/ajax.js