I need to retrieve several values from an IndexedDB, check if all of them fulfill some constraint (different for all of them) and if so call a function. To illustrate this better imagine that calls to IndexedDB were sychronous, we would have something like.
function myFunc(varNames, conditions) {
for(var i = 0; i < varNames.length; i++) {
if(!isGood(db.get(varNames[i]), conditions[i])) {
return;
}
}
doStuff();
}
Since IndexedDB is are asynchronous I do not konw how to do it. Using a callback in every get is not really feasible since the call to doStuff depends on all the gets. Accumulating the results in a global variable would not work either because myFunc is called more than one. I tried something like:
function myFunc(varNames, conditions) {
var valid = 0;
checker() {
valid++;
if(valid == varNames.length) {
doStuff();
}
}
for(var i = 0; i < varNames.length; i++) {
db.get(varNames[i], function(val) {
if(isGood(val, conditions[i]) {
checker();
}
});
}
}
But that does not seems to work either. Any ideas?
You can make the DB calls one at a time, and use the success callback to make the next DB call. Something like this:
function myFunc(varNames, conditions){
if(varNames.length){
var name = varNames.shift(),
condition = conditions.shift();
db.get(name, function(val){
if(isGood(val, condition)){
myFunc(varNames, conditions);
}
});
} else {
doStuff();
}
}
Related
The function below prints Chrome bookmarks in a folder recursively. How could I alter the below function to call another function after the final recursive loop is processed? chrome.bookmarks.getChildren() is asynchronous which makes it difficult to know when the function is done processing everything.
Thanks.
for (var i = 0; i < foldersArray.length; i++) {
// The loop makes several calls with different folder IDs.
printBookmarks(foldersArray[i]);
}
// I'd like any code here to be run only after the above has
//finished processing
function printBookmarks(id) {
chrome.bookmarks.getChildren(id, function(children) {
children.forEach(function(bookmark) {
console.debug(bookmark.title);
printBookmarks(bookmark.id);
});
});
}
EDIT: Sorry, I don't think I was clear in the initial code example. I've updated the code to show the problem I'm having with the asynchronous function by calling the function multiple times. I'd like any code after the printBookmarks function calls to wait for all the printBookmarks functions to finish processing.
Your asynchronous method instances may all be executing at once, and you don't know how many there will be beforehand. So, you'll have to keep count and then use a callback when the last asynchronous method is done.
for (var i = 0; i < foldersArray.length; i++) {
// The loop makes several calls with different folder IDs.
printBookmarks(foldersArray[i], thingsToDoAfter);
}
function thingsToDoAfter() {
// I'd like any code here to be run only after the above has
// finished processing.
}
var count = 0;
function printBookmarks(id, callback) {
count++;
chrome.bookmarks.getChildren(id, function(children) {
children.forEach(function(bookmark) {
console.debug(bookmark.title);
printBookmarks(bookmark.id, callback);
});
count--;
if (count === 0 && callback)
callback();
});
}
I've recently had to solve this problem. The solution was similar to Eric's, but I found that I needed the count variable to be local to the function. Here's how I would solve this:
for(var i=0;i<foldersArray.length; i++){
// The loop make's several call's with different folder ID's.
var printed_children = 0;
printBookmarks(foldersArray[i],function() {
printed_children++;
if(printed_children == foldersArray.length){
// You know you are done!
}
});
}
// I'd like any code here to be run only after the above has
//finished processing.
function printBookmarks(id,finished_callback) {
// the printed_children count is local so that it can keep track of
// whether or not this level of recursion is complete and should call
// back to the previous level
var printed_children = 0;
chrome.bookmarks.getChildren(id, function(children) {
children.forEach(function(bookmark) {
console.debug(bookmark.title);
// added a callback function to the printBookmarks so that it can
// check to see if all upstream recursions have completed.
printBookmarks(bookmark.id,function() {
printed_children++;
if(printed_children == children.length){
finished_callback();
}
});
});
if(children.length == 0){
finished_callback();
}
});
}
It's a bit ugly, but it should work.
You could save all your completed calls into a variable and test against the number of bookmarks you want to process. When you reach the end (the count of completions equals the amount of bookmarks to process), then you execute your final function.
An answer to a similar problem is here, with code that you can use as a guide:
How do I load a variable number of scripts with jQuery.getScript() before running javascript code?
you can do something like this JQFAQ.com.I'm updating for the future uses.
Might be a better way to go about this, but you could add a depth parameter, something like
printBookmarks('0', 0);
function printBookmarks(id, depth) {
chrome.bookmarks.getChildren(id, function(children) {
children.forEach(function(bookmark) {
console.debug(bookmark.title);
printBookmarks(bookmark.id, depth + 1);
});
if(depth == 0) yourFunction();
});
}
EDIT in response to comment
This is a variation on another answer for a slightly different approach.
runCount = 0;
for (var i = 0; i < foldersArray.length; i++) {
// The loop makes several calls with different folder IDs.
printBookmarks(foldersArray[i]);
runCount++;
}
while(runCount > 0) { // sleep for 10ms or whatnot}
// I'd like any code here to be run only after the above has
// finished processing.
function printBookmarks(id) {
chrome.bookmarks.getChildren(id, function(children) {
children.forEach(function(bookmark) {
console.debug(bookmark.title);
printBookmarks(bookmark.id);
runCount--;
});
});
}
I'm trying to do several calls inside a loop to an asynchronous API until the value that I want (true in this case) is returned. The issue is that I don't want to keep looping after that value is found and I don't want to execute the lines after the loop without the value returned from it...but so far I can't get that working. I think I'm doing something wrong here, but "I can't get the whole picture".
function isSelected(element, callback) {
// This is a little bit confusing for me...can I just get the value from
// getDataAsync without using isSelected function?
Office.select(element).getDataAsync(function (asyncResult) {
var result = true;
// some logic here that may change 'result'
callback(result);
});
}
function delete(elements) {
var index = -1;
for (var i = 0, (i < elements.length) && (index < 0); i++) {
isSelected(elements[i], function(result) {
if (result) { index = i; }; // ...and I don't want to keep "looping"
});
}
// I want to execute these lines after the for-loop is done
// ...do something with the "correct" index value
}
Have you tried Kriskowal's Q? There's a nice function called Q#allSettled:
Q.allSettled(promises)
.then(function (results) {
results.forEach(function (result) {
if (result.state === "fulfilled") {
var value = result.value;
} else {
var reason = result.reason;
}
});
});
So basically this is how it would work in your case:
var promises = [];
for(/* conditions */) {
promises.push(/* async call which returns a promise */);
}
Q.allSettled(promises).then(function(results) {
results.forEach(function (result) {
var value;
if (result.state === "fulfilled") {
value = result.value;
// do something with "value"
}
});
});
allSettled just makes sure the then will be executed regardless of whether or not the promise was successful or not, and you can check the value of the object you retrieve from your async call.
I am recommending three ways to doing it.
Using just JavaScript.
Using Async library.
Using underscore library.
Here you can see the javascript implementation:
You can do something like that:
You need to track home many times, you call the function, and how many times the callback happened
function delete(elements) {
var index = -1;
var stack=0;
for (var i = 0, (i < elements.length) && (index < 0); i++) {
stack++ // Go up on each loop
isSelected(elements[i], function() {
stack--; //Go down each callback
index = i;
if(stack==0) afterAllFinish() //When it return to 0 mean all callback have finished
});
}
function afterAllFinish(){
// I want to execute these lines after the for-loop is done
// ...do something with the "correct" index value
}
}
Using other libraries:
Please take a look at http://underscorejs.org/#after for the underscore way to solve it.
Please take a look at https://github.com/caolan/async#parallel to see the async way to solve it.
I'm writing a Javascript function that pulls words out of a CloudDB database and puts them in one of three arrays: verb, adjective, or noun. Once all the words are in place and the last loop runs, I want to run the next function. Here's the code:
function verbnoun(array){
verbs = [];
adjectives = [];
nouns = [];
for (i = 0; i<array.length; i++){
//console.log(i); <-- returns 0,1,2,3...57,58 as expected
my_db.get(array[i], function(err, doc) {
if (!err){
if (doc.type == "verb"){
verbs.push(doc.word);
}
else if (doc.type == "adjective"){
adjectives.push(doc.word);
}
else if (doc.type == "noun"){
nouns.push(doc.word);
}
}
//console.log(i); <-- returns 59,59,59,59,59
if (i+1 == array.length){
nextFunction(verbs, adjectives, nouns);
}
});
}
}
But I can't figure out how to run the next function after the last loop. If I try to run it outside of the for loop, I just get empty arrays. Using an if statement to trigger on the last loop doesn't seem to work either, because the "i" in the for loop is stuck on 59 each time instead of counting up from 0,1,2,3,etc (see comment in code), so I can't single out which is the last loop.
This is my first post on StackExchange, so thanks for your patience.
You are suffering from closure over i, which has (probably) been incremented all the way up to 59 before any of the get calls return and fire their callback.
Essentially, i represents the number of requests sent, not the number that have returned successfully. You need a different counter to track that value.
function verbnoun(array) {
verbs = [];
adjectives = [];
nouns = [];
// New counter for completed requests
var finished = 0;
for (i = 0; i < array.length; i++) {
//console.log(i); <-- returns 1,2,3...57,58,59 as expected
my_db.get(array[i], function(err, doc) {
if (!err) {
if (doc.type == "verb") {
verbs.push(doc.word);
} else if (doc.type == "adjective") {
adjectives.push(doc.word);
} else if (doc.type == "noun") {
nouns.push(doc.word);
}
}
//console.log(i); <-- returns 59,59,59,59,59
if (++finished == array.length) {
nextFunction(verbs, adjectives, nouns);
}
});
}
}
You're running into two (or possibly three) issues there:
The reason you can't do it after the for loop is that the get calls to the database haven't finished yet; they're asynchronous. In fact, it's important to remember that your function will return before the first get returns.
i within the callback you passed get is an enduring reference to the variable i, not a copy of it when the callback was created, which is why you saw it was always 59 (the array length).
Your code is falling prey to The Horror of Implicit Globals by not declaring your local variables.
See comments for how you might address it:
function verbnoun(array) {
// Use var to declare your variables
var verbs = [];
var adjectives = [];
var nouns = [];
// Use a counter to remember how many responses you've had
var responses = 0;
// Schedule the calls
for (var i = 0; i < array.length; i++) {
// Call a function do do the work, passing in the index
// for this loop
doGet(i);
}
// Remember, your function returns at this point, before ANY
// of the callbacks occurs
// This function does the work
function doGet(index) {
// Because we're using `index`, not `i`, we get a value
// for each call that won't change
my_db.get(array[index], function(err, doc) {
if (!err) {
if (doc.type == "verb") {
verbs.push(doc.word);
} else if (doc.type == "adjective") {
adjectives.push(doc.word);
} else if (doc.type == "noun") {
nouns.push(doc.word);
}
}
// Count this response
++responses;
// If we have all of them, we're done
if (responses == array.length) {
nextFunction(verbs, adjectives, nouns);
}
});
}
}
Although actually, in this particular case, we don't need index within the callback, so we didn't absolutely need to separate the calls out into a builder function. But it still makes for a nice, clean separation of what's going on.
I need to break cycle if proccess = true, but it's undefined.
var mapFound;
var locations = {$addressTest};
for (var i = 0; i < locations.length; ++i) {
getCoordinates(
locations[i],
function(proccess) {
}
)
if(proccess) { break; }
}
The problem seems to be basically that getCoordinates() makes an asynchronous call.
By the time the loop is over you haven't received even the first response, based on your question text, so you need to use another solution.
I mean by this that you won't be able to break the cycle, because by the time the cycle is over you still don't know if process is true.
Depending on your implementation you might want to take a look at promises. Although it might be easier to wrap the whole thing in a function that executes a callback:
function getCoords(locations, name, callback){
for (var i = 0; i < locations.length; i++) {
getCoordinates( locations[i], name,
function(proccess) {
if(process){
console.log("Map found in "+locations[i]);
callback.call();
}
}
);
}
}
getCoords({$addressTest}, {$name}, function(){
// Place here whatever you want to do once the map is found.
// you can get the map location by passing it as an argument for the callback.
});
The function below prints Chrome bookmarks in a folder recursively. How could I alter the below function to call another function after the final recursive loop is processed? chrome.bookmarks.getChildren() is asynchronous which makes it difficult to know when the function is done processing everything.
Thanks.
for (var i = 0; i < foldersArray.length; i++) {
// The loop makes several calls with different folder IDs.
printBookmarks(foldersArray[i]);
}
// I'd like any code here to be run only after the above has
//finished processing
function printBookmarks(id) {
chrome.bookmarks.getChildren(id, function(children) {
children.forEach(function(bookmark) {
console.debug(bookmark.title);
printBookmarks(bookmark.id);
});
});
}
EDIT: Sorry, I don't think I was clear in the initial code example. I've updated the code to show the problem I'm having with the asynchronous function by calling the function multiple times. I'd like any code after the printBookmarks function calls to wait for all the printBookmarks functions to finish processing.
Your asynchronous method instances may all be executing at once, and you don't know how many there will be beforehand. So, you'll have to keep count and then use a callback when the last asynchronous method is done.
for (var i = 0; i < foldersArray.length; i++) {
// The loop makes several calls with different folder IDs.
printBookmarks(foldersArray[i], thingsToDoAfter);
}
function thingsToDoAfter() {
// I'd like any code here to be run only after the above has
// finished processing.
}
var count = 0;
function printBookmarks(id, callback) {
count++;
chrome.bookmarks.getChildren(id, function(children) {
children.forEach(function(bookmark) {
console.debug(bookmark.title);
printBookmarks(bookmark.id, callback);
});
count--;
if (count === 0 && callback)
callback();
});
}
I've recently had to solve this problem. The solution was similar to Eric's, but I found that I needed the count variable to be local to the function. Here's how I would solve this:
for(var i=0;i<foldersArray.length; i++){
// The loop make's several call's with different folder ID's.
var printed_children = 0;
printBookmarks(foldersArray[i],function() {
printed_children++;
if(printed_children == foldersArray.length){
// You know you are done!
}
});
}
// I'd like any code here to be run only after the above has
//finished processing.
function printBookmarks(id,finished_callback) {
// the printed_children count is local so that it can keep track of
// whether or not this level of recursion is complete and should call
// back to the previous level
var printed_children = 0;
chrome.bookmarks.getChildren(id, function(children) {
children.forEach(function(bookmark) {
console.debug(bookmark.title);
// added a callback function to the printBookmarks so that it can
// check to see if all upstream recursions have completed.
printBookmarks(bookmark.id,function() {
printed_children++;
if(printed_children == children.length){
finished_callback();
}
});
});
if(children.length == 0){
finished_callback();
}
});
}
It's a bit ugly, but it should work.
You could save all your completed calls into a variable and test against the number of bookmarks you want to process. When you reach the end (the count of completions equals the amount of bookmarks to process), then you execute your final function.
An answer to a similar problem is here, with code that you can use as a guide:
How do I load a variable number of scripts with jQuery.getScript() before running javascript code?
you can do something like this JQFAQ.com.I'm updating for the future uses.
Might be a better way to go about this, but you could add a depth parameter, something like
printBookmarks('0', 0);
function printBookmarks(id, depth) {
chrome.bookmarks.getChildren(id, function(children) {
children.forEach(function(bookmark) {
console.debug(bookmark.title);
printBookmarks(bookmark.id, depth + 1);
});
if(depth == 0) yourFunction();
});
}
EDIT in response to comment
This is a variation on another answer for a slightly different approach.
runCount = 0;
for (var i = 0; i < foldersArray.length; i++) {
// The loop makes several calls with different folder IDs.
printBookmarks(foldersArray[i]);
runCount++;
}
while(runCount > 0) { // sleep for 10ms or whatnot}
// I'd like any code here to be run only after the above has
// finished processing.
function printBookmarks(id) {
chrome.bookmarks.getChildren(id, function(children) {
children.forEach(function(bookmark) {
console.debug(bookmark.title);
printBookmarks(bookmark.id);
runCount--;
});
});
}