Develop Reference

Wait until multiple asynchronous functions complete before executing

I have a Javascript for loop which runs through an array of database records (that have been extracted already).
I want to know when all the subsequent asynchronous actions have completed but I can't seem to do it.
For each record, the code runs a number of functions which return promises and then resolve (which then triggers another function to get more information, etc). This all works ok, but I can't figure out how to gather up each "FOR" iteration and detect when all records have been processed. Basically, I want to use a "throbber" and have the throbber remain until all processing has been completed.
Code is below (I've removed some extraneous info)...
for (var i = 0; i < systemArray.length; i++) {
// ***** FOR EACH SYSTEM ***** //
var currRecord = systemArray[i];
// SECTION REMOVED //
// GET SYSTEM LINES
var thisSystem = AVMI_filterArray("8.9", currRecord);
var thisSystemName = thisSystem[1].value;
var thisSystemRID = thisSystem[0].value;
// GET CHILDREN RIDS
AVMI_getChildren(systemLinesTable, thisSystemRID, systemLinesFID).done(function(ridList, sysRID)
{
var thisDiv = "div#" + sysRID;
// GET RECORD INFO FOR EACH RID
AVMI_getMultipleRecordInfoFromArray(ridList, systemLinesTable).done(function(systemLinesArray)
{
if (systemLinesArray != "" && systemLinesArray != null) {
systemLinesArray = systemLinesArray.sort(propComparator("10"));
x = AVMI_tableCombiner("System Lines", systemLinesArray, systemLinesCLIST, "skip3Right hbars xsmallText");
$(thisDiv).append(x);
} else {
$(thisDiv).append("<p>No System Lines...</p>");
}
}
);
}
);
} // ***** FOR EACH SYSTEM ***** //
AVMI_throbberClose(); // THIS, OF COURSE, EXECUTES ALMOST IMMEDIATELY
Here is function 1
///////////////////////////////////////////////////////////////
// Get related records using master
///////////////////////////////////////////////////////////////
function AVMI_getChildren(AVMI_db, AVMI_rid, AVMI_fid, AVMI_recText) {
var AVMI_query = "{" + AVMI_fid + ". EX. " + AVMI_rid + "}";
var AVMI_ridList = [];
var dfd2 = $.Deferred();
$.get(AVMI_db, {
act: "API_DoQuery",
query: AVMI_query,
clist: "3",
includeRids: "1"
}).then(function(xml1) {
$(xml1).find('record').each(function(){
var AVMI_record = $(this);
var AVMI_childRID = AVMI_record.attr("rid");
AVMI_ridList.push(AVMI_childRID);
});
AVMI_throbberUpdate("Found " + AVMI_ridList.length + " " + AVMI_recText + "...");
dfd2.resolve(AVMI_ridList, AVMI_rid);
});
return dfd2.promise();
};
And function 2
///////////////////////////////////////////////////////////////
// Get record info for each array member
///////////////////////////////////////////////////////////////
function AVMI_getMultipleRecordInfoFromArray(ridList, AVMI_db, AVMI_recType) {
var promises = [];
var bigArray = [];
$.each(ridList, function (index,value) {
var def = new $.Deferred();
var thisArray = [];
$.get(AVMI_db, { //******* ITERATIVE AJAX CALL *******
act: 'API_GetRecordInfo',
rid: value
}).then(function(xml2) {
AVMI_throbberUpdate("Got " + AVMI_recType + " " + value + "...");
$(xml2).find('field').each(function() {
var $field = {};
$field.fid = $(this).find('fid').text();
$field.name = $(this).find('name').text();
$field.value = $(this).find('value').text();
thisArray.push($field);
});
thisArray = thisArray.sort(AVMI_ArrayComparator);
bigArray.push(thisArray);
def.resolve(bigArray);
});
promises.push(def);
});
return $.when.apply(undefined, promises).promise();
};
Any ideas of how to structure this? I've tried all sorts of things with $.Deferred but I can't quite figure it out...

You do exactly the same thing you did in AVMI_getMultipleRecordInfoFromArray: Collect the promises in an array and use $.when (or Promise.all) to wait until they are resolved.
You can simply use .map in here which also takes care of the "function in a loop" problem:
var promises = systemArray.map(function(currRecord) {
// ...
return AVMI_getChildren(...).done(...);
});
$.when.apply(undefined, promises).done(function() {
AVMI_throbberClose();
});

You should have to disable the async property of ajax. By default it is set to true. It means that your doesn't wait for your ajax response. That why it is returning you undefined value and you have to set it to false. So your code will wait your request to complete.
So all you have to do is.
$.ajax({
url: '',
type: '',
async: false,
success: function(data){
}
});

How long should I let a javascript function run before manually ending it?

I have a javascript function that has about 4 ajax requests in it. It typically takes less than a second to run. However, I'm working on the error handling now and was wondering. How long, in seconds, should I allow my javascript function to try to keep working until I manually cancel it and allow the user to try again?
Here's what the function in question looks like. (not everything is there, but it could potentially have (1000*5000*3)+(70)+(1000)+(6)+(2500) bytes being sent)
function saveChanges(bypassDeckSave){
// bypassDeckSave = undefined - does not bypass
showSavedNotification_check = 1;
if(userid != 0){
//values in database
var subjectID = $('.lib_folder_id').val(),
folderID = $('.lib_subject_id').val();
if(subjectID == 0 || folderID == 0){//if database values null, ask for some
console.log("db deck location not saved, asked for it");
//values to set to
var setFolderID = $('.libDeckLocationModifierDiv .folders li.on').val(),
setSubjectID = $('.libDeckLocationModifierDiv .subjects li.on').val();
if(isNaN(setFolderID) || isNaN(setSubjectID) ||
setFolderID == 0 || setSubjectID == 0)
{
openDeckLocationDiv();
showSavedNotification_check = 0;
return;
}
}
}
var deck_id = $('.deck_id').val();
if(deck_id == 0){
// create a new deck
createDeckThenSave();
return;
}
if(userid != 0){
//values in database
var subjectID = $('.lib_folder_id').val(),
folderID = $('.lib_subject_id').val();
if(subjectID == 0 || folderID == 0){//if database values null, ask for some
//values to set to
saveDeckLocation();
}
}
// removes empty rows
$('.editMain li').each(function(){
var one = $(this).find('.text1').val(),
two = $(this).find('.text2').val();
if(one == "" && two == ""){
//remove this row and remove value from updateSaveArray + add to delete array
var currentval = $(this).val();
var rowid = ".row_"+currentval;
updateSaveArray = jQuery.grep(updateSaveArray, function(value) {
return value != currentval;
});
$(rowid).remove();
updateDeleteArray[updateDeleteArray.length] = currentval;
}
});
if(bypassDeckSave == undefined){
// save deck info to db
var deckname = $('.editDeckNameInput').val(),
cardCount = $('.editMain li.mainLi:visible').length,
deckTermLanguage = $('.selector.one select').val(),
deckDefinitionLanguage = $('.selector.two select').val(),
deckThirdBoxLanguage = $('.selector.three select').val(),
deckDescription = $('.editMoreDeckOptionsDiv textarea').val();
if($('.editMoreDeckOptionsSelector .onlyme').hasClass("on")){
var viewPreferences = 1;
}else{
var viewPreferences = 0;
}
if($('.editUseThirdboxDiv').hasClass('on')){ var thirdbox = 1;
}else{ var thirdbox = 2; }
// console.log("deckInfoSave called");
$.ajax({
type: "POST",
url: "/edit/deckInfoSave.php",
data: { pDeckid: deck_id, pDeckname: deckname, pCardCount: cardCount,
pDeckTermLanguage: deckTermLanguage, pDeckDefinitionLanguage: deckDefinitionLanguage,
pDeckThirdBoxLanguage: deckThirdBoxLanguage, pThirdbox: thirdbox,
pDeckDescription: deckDescription, pViewPreferences: viewPreferences
}
})
.done(function(data){
// console.log(data);
// decksaved = 1;
saveDeckInfoHasFinished = 1;
});
}else{
saveDeckInfoHasFinished = 1;
}
// prepares edited card array
// gets all needed values and stores in holdSaveCardArray
var holdSaveCardArray = [];
for (i = 0; i < updateSaveArray.length; ++i) {
var currentCard_id = updateSaveArray[i],
rowidClass = ".row_"+currentCard_id,
text1val = $(rowidClass+" .text1").val(),
text2val = $(rowidClass+" .text2").val(),
text3val = $(rowidClass+" .text3").val();
cardOrder = $(".editMain li.mainLi:visible").index($(rowidClass)) + 1;
holdSaveCardArray[holdSaveCardArray.length] = {
"card_id": currentCard_id,
"text1val": text1val,
"text2val": text2val,
"text3val": text3val,
"cardOrder": cardOrder
};
}
// console.log(print_r(holdSaveCardArray));
// delete cards start
// deletes any card with an id in updateDeleteArray
$.ajax({
type: "POST",
url: "/edit/deleteCards.php",
data: { pDeck_id: deck_id, pDeleteArray: updateDeleteArray }
})
.done(function( msg ) {
// $('.temp').append(msg);
updateDeleteArray = [];
deleteCardsHasFinished = 1;
});
// save cards to database
// loops through each card that had changes made to it
$.ajax({
type: "POST",
url: "/edit/saveCardsArray.php",
dataType: "JSON",
data: { pDeck_id: deck_id, pCardArray: holdSaveCardArray}
}).done(function(data){
for (var i = 0; i < data.length; i++) {
var temp_id = data[i]["temp_id"], // new id
card_key = data[i]["card_key"], // old id
currentClassName = 'row_'+temp_id,
currentClass = '.row_'+temp_id,
nextClassName = 'row_'+card_key;
$(currentClass).val(card_key);
$(currentClass).removeClass(currentClassName).addClass(nextClassName);
}
saveCardsHasFinished = 1;
});
updateSaveArray = [];
// update order start // uses li value
updateOrderArray = [];
$('.editMain').find(".mainLi").each(function(){
var temp = $(this).val();
updateOrderArray[updateOrderArray.length] = temp;
});
$.ajax({
type: "POST",
url: "/edit/orderCards.php",
data: { pUpdateOrderArray: updateOrderArray }
})
.done(function( msg ) {
updateOrder = 0;
updateOrdersHasFinished = 1;
});
closeLibDLM(); console.log("closeLibDLM1");
changeSaveStudyButton(1);
} //saveChanges function end

So you could totally set an arbitrary timeout, or even a timeout that should encompass everything finishing on time? But, what happens when it doesn't? What happens when it takes longer to finish?
At that point, you're going to be in quite a pickle. I did not thoroughly read your code, but I would highly advise trying to use a callback() or Promise to end your function. And, not set a timeout. - This is a cleaner solution in that things happen when you want them, and after some defined has happened. Time is a relative, and finicky attribute of our world (Einstein proved this =P) that would be best be used as your friend, and not your enemy.
The counter argument would be, well sometimes things just hang. And, that is totally valid. For that case, you could set a timeout for a long period of time. But, again, that is still a 'hacky' way to handle things. In this case, I would try to create some handling to detect errors, or timeouts. i.e you could periodically check the page for a status. You could check to see which events are in existence that you could hook into.
If you could share in what instances our program hangs, I could better suggest a solution. Otherwise this question may end up being opinionated based on coding styles.
Hope this helps in some regard :)

I've worked in the Aerospace Aviation Industry and have asked a similar question when working with Microcontrollers. It seems you are looking for an appropriate timeout value based on calculation, but this may not be necessary in your case. Often times timeout values are more or less arbitrary. If your function executes in an average of roughly 1 second, maybe your timeout value should be set to 3 seconds. You should come to a conclusion based on testing.

AngularJS looping through http get req to find correct url

So I'm currently working on a project where I'm making a http request with angular to around 1500 URLs looking for the json that matches with the condition I have (only 1 of the URLs will match). I currently have an implementation that sometimes work (but isnt deterministic I'm assuming because it the requests are asynchronous although it might just be a bug??). I'm still kinda new to angular so I'm not sure if I'm doing it correctly at all so I'm open to changing the code entirely!
this.matchingurl;
this.data;
this.findUrl = function(condition) {
var that = this;
for (var i = 0; i <= ; i++) {
// this is just looping through the url list
for (var i = 0; i < urlList.length; i++) {
for (var j = 0; j < urlList[i]['list'].length; j++) {
this.url = 'http://' + urlList[i]['list'][j] + restofurl;
var tempUrl = urlList[i]['list'][j];
$http.get(this.url).success(function(data) {
if (condition is met in data) {
that.matchingurl = tempUrl;
return;
}
})
.error(function(data){
// error handling
});
}
}
}
}
TLDR: matchingUrl isn't what I expect? Still goes inside the "condition" loop but doesn't spit out right url. Always gives me the same "url" for any sublist, right or wrong.

I would suggest that you use $q promise of angularjs to do the task, either you can check one url at a time serially( slow if you ask me), or get all results at a time by requesting parallely. Below, I have done a crude implementation of the latter
this.findUrl = function(condition) {
var urls =[], self = this, oUrl; // collect all the urls
urlList.forEach(function(list){
list.forEach(function(url){
oUrl.push(url);
urls.push('http://' + url + restofurl); // not sure where you are getting this restofurl from...
});
});
$q.all(urls.map(function(url){
return $http.get(url); // returns promise for each url, thus mapping all urls to promise.
})).then(function(datas){
datas.some(function(data, i){
if(data == condition){ // change as per requirement
self.matchingurl = oUrl[i];
return true;
}
})
});
}
Edit:
same thing done checking one url at a time:
this.findUrl = function(condition) {
var urls =[], self = this, oUrl; // collect all the urls
urlList.forEach(function(list){
list.forEach(function(url){
oUrl.push(url);
urls.push('http://' + url + restofurl); // not sure where you are getting this restofurl from...
});
});
function check(i){
function fail(){ // move to check the next url in the array
i++;
if(i<urls.length) return check(i);
console.log('none of the urls are matching');
}
return http.get(urls[i]).then(function(data){
if(data == condition){ // change as per requirement
self.matchingurl = oUrl[i];
}else{
fail();
}
}).catch(fail);
}
check(0); // start the chain
}

You are right, this you could run into trouble due to the synchronous http calls if you don't handle your variables correctly. Here is a snippet to achieve the same using synchronous http calls.
this.matchingurl;
this.data;
this.findUrl = function(condition, i, j) {
var that = this;
this.url = 'http://' + urlList[i]['list'][j] + restofurl;
var tempUrl = urlList[i]['list'][j];
$http.get(this.url).success(function(data) {
if (condition is met in data) {
that.matchingurl = tempUrl;
return;
}
else{
if(urlList[i]['list'].length > j + 1){
j++;
}
else{
if(urlList.length > i+1){
i++;
j=0;
}
else{
return;
}
}
this.findUrl(condition, i, j);
}
})
.error(function(data){
// error handling
});
}
}
}
}
this.findUrl(condition, 0, 0);

How show alert after ajax post loop done ? Javascript [duplicate]

loadInfo: function(){
var jsonCounter = 0,
room = ['room1','room2','room3'],
dates = [],
prices = []
$.each(booking.rooms, function(key, room_name) {
$.getJSON('/get_info.php?room='+room_name, function(data) {
dates[room_name] = data
jsonCounter++
})
$.getJSON('/get_info.php?room='+room_name+'&prices', function(data) {
prices[room_name] = data
jsonCounter++
})
})
function checkIfReady() {
if (jsonCounter === rooms.length * 2) {
clearInterval(timer)
run_the_rest_of_the_app()
}
}
var timer = setInterval(checkIfReady, 100)
}
(Modified a lot, as it's part of a class etc etc.)
At the moment this feels a bit hackish, as the timer usage seems rubbish. I would use $.when and $.done, but I don't know how many rooms there might be, so I don't know what to put into when.
How do I ensure that run_the_rest_of_the_app() only gets called once all of the AJAX requests come back?

var activeAJAX = 0;
Before making an AJAX call, activeAJAX++;
After completing an AJAX call (in the callback): if (--activeAJAX == 0) { allDone(); }

Here is how to use when/done
loadInfo: function(){
var room = ['room1','room2','room3'],
dates = [],
prices = [],
requests = [];
$.each(booking.rooms, function(key, room_name) {
var aRequest;
aRequest = $.getJSON('/get_info.php?room='+room_name, function(data) {
dates[room_name] = data;
});
requests.push(aRequest);
aRequest = $.getJSON('/get_info.php?room='+room_name+'&prices', function(data) {
prices[room_name] = data;
});
requests.push(aRequest);
})
$.when.apply($, requests).done(run_the_rest_of_the_app);
}

javascript curtain (used to idicate busy process) not displaying for entire process. Probaly I dont understand the callback wll enough

I have a process where a user puts in a comma delimited list that is then processed one item at a time. I want to be able to indicate to the user that it is processing and let them know when it is done. So I used the curtain idea from Borgar's replay to ... Div Over Page.
This worked but the curtain disappears well before the process is done. I believe it is because each call in the forEach loop inside the importIDs function is called asynchronously thus returning control back before it completes. (I know that is the idea behind asynchronous code.) So what do I need to do to keep the curtain up until it is done?
HTML that calls the function
<label>Import list:</label><input style="width: 30em;" type="text" id="jcDelimitedList"/><input onclick="importIDs('jcDelimitedList','selectedJobCodes','AddJobCode');" type="button" value="Do It"/>
import function
importIDs = function(dList,nodeId,actionName){
busyProcess(function(){
var ids = dojo.byId(dList).value;
dojo.forEach(ids.split(","),function(entry,i){doAssosiate(nodeId,actionName,null,dojo.byId(entry));});
});
};
which calls the busy function
busyProcess = function(callback){
var ret;
var curtain = document.body.appendChild(document.createElement('div'));
curtain.id = "curtain";
curtain.onkeypress = curtain.onclick = function(){return false;};
try{
ret = callback();
}finally{
curtain.parentNode.removeChild(curtain);
}
return ret;
};
which in turn processes the passed in loop that calls doAssosiate for each element in the array:
doAssosiate = function(nodeID,actionName,evt,aNode){
if(aNode==null)return;
var node = dojo.byId(nodeID);
var newNode;
var target = evt!=null?evt.target:aNode;
newNode = dojo.clone(target);
var tID = target.id;
var sUrl = "action/groups." + actionName + "?id=" + tID + "&groupID=" + groupID + bustCache("&");
var get = getDefered(sUrl);
get.addCallback(function(data){
node.appendChild(newNode);
target.parentNode.removeChild(target);
return data;
});
get.addCallback(function(data){
dojo.behavior.apply();
return data;
});
};
which runs each url with getDefered
getDefered = function(url){
console.log(url);
return dojo.xhrGet({
url:url
});
};
I think I have all the relevant code above. I thought using sending the loop through the busy process would hold until finished and then return instead it holds until it fires off each iteration and then returns before they are complete.
As always thanks for any input and criticism.

A couple of interesting bugs in the above. Mainly if the list of ids in the array is to large it troughs more traffic at the database then it can handle. So I went to a recursive function instead of the foreach loop. Then removed the responsibility of turning off the curtain from busyProcess function and added it to the recursive call that turned the curtain off on exit of the recursion. For anyone that cares below are the changed functions. Also change to use dojox.widget.Standby for the curtain.
busyProcess = function(callback){
var ret;
document.body.appendChild(standby.domNode);
standby.show();
ret = callback();
return ret;
};
instead of calling doAssosiate now it calls assosiateAll;
importIDs = function(dList,nodeId,actionName){
busyProcess(function(){
var ids = dojo.byId(dList).value;
var sourceNode = dojo.byId(nodeId);
assosiateAll(ids.split(","),0,sourceNode,actionName);
});
};
assosiateAll = function(idArray,idx,sourceNode,actionName){
if(idx <= idArray.length ){
var target = dojo.byId(idArray[idx]);
if(target == null){
idx++;
assosiateAll(idArray,idx,sourceNode,actionName);
}else{
var newNode = dojo.clone(target);
var tID = target.id;
var sUrl = "action/groups." + actionName + "?id=" + tID + "&groupID=" + groupID + bustCache("&");
var get = getDefered(sUrl);
get.addCallback(function(data){
sourceNode.appendChild(newNode);
target.parentNode.removeChild(target);
return data;
});
get.addCallback(function(data){
idx++;
assosiateAll(idArray,idx,sourceNode,actionName);
return data;
});
get.addCallback(function(data){
dojo.behavior.apply();
if (idx == (idArray.length -1)) {
standby.hide();
}
return data;
});
}
}
};