For loop not waiting for winjs promise completion - microsoft-metro

Question

For loop not waiting for winjs promise completion
for (var j = 0; j < magazineResult[0].data.length; j++) {
downRequest[0].data[j].COVER_PAGE_THUMB = parentUrl + eval(JSON.stringify(downRequest[0].data[j].COVER_PAGE_THUMB));
// Create a new download operation.
downloadFile(eval(magazineResult[0].data[j].COVER_PAGE_THUMB),eval(JSON.stringify(magazineResult[0].data[j].COVER_PAGE_THUMB)));
var url = downRequest[0].data[j].COVER_PAGE_THUMB;
var imgPath = downRequest[0].data[j].ISSUE_ID;
var imgExtension = url.substring(url.lastIndexOf('.') + 1);
var fileName = imgPath + "." + imgExtension;
var promise = Windows.Storage.ApplicationData.current.localFolder.createFileAsync(fileName, Windows.Storage.CreationCollisionOption.replaceExisting);
// Assign the completion handler function.
promise.done(function (newFile) {
MagazineDownLoad.downloadFile(url, fileName, j, newFile);
});
}

Answer 1

If you're trying to get MagazineDownLoad.downloadFile to operate asynchronously then you'll have to modify it's definition:
// in MagazineDownload
function downloadFile(url, filename, j, newfile){
return new WinJS.Promise(function (complete, error, progress) {
var returnValue;
//do the stuff that you do and assign something to returnValue
complete(returnValue);
});
}
Then you can use it asynchronously:
for (var j = 0; j < magazineResult[0].data.length; j++) {
downRequest[0].data[j].COVER_PAGE_THUMB = parentUrl + eval(JSON.stringify(downRequest[0].data[j].COVER_PAGE_THUMB));
// Create a new download operation.
downloadFile(eval(magazineResult[0].data[j].COVER_PAGE_THUMB),eval(JSON.stringify(magazineResult[0].data[j].COVER_PAGE_THUMB)));
var url = downRequest[0].data[j].COVER_PAGE_THUMB;
var imgPath = downRequest[0].data[j].ISSUE_ID;
var imgExtension = url.substring(url.lastIndexOf('.') + 1);
var fileName = imgPath + "." + imgExtension;
var promise = Windows.Storage.ApplicationData.current.localFolder.createFileAsync(fileName, Windows.Storage.CreationCollisionOption.replaceExisting);
// Assign the completion handler function.
promise.done(function (newFile) {
MagazineDownLoad.downloadFile(url, fileName, j, newFile).done(function(result){
//do some more stuff with the result
});
});
}

Answer 2

The WinJS.Promise() runs asynchronously and your for-loop runs in sync. What you are experiencing is expected. If you want to queue your actions you should not perform a loop, but rather queue a new action when your done() is called. Something like this:
var index = 0, data = magazineResult[0].data;
function queueDownload() {
// Duplicate all needed logic here from your question
var promise = Windows.Storage.ApplicationData.current.localFolder.createFileAsync(fileName, Windows.Storage.CreationCollisionOption.replaceExisting);
// Assign the completion handler function.
promise.done(function (newFile) {
MagazineDownLoad.downloadFile(url, fileName, j, newFile);
if (index < data.length) {
queueDownload(++index);
}
});
}
queueDownload(index);