In this code I want to get the posSnapshot.val().case and store it in the tatarget var, for this I need to execute the dbCall() function BEFORE console.log('TARGETOUT', tatarget)
function dbCall() {
var toReturn;
return admin.database().ref().child('games/' + event.params.gameId + '/player1/boats').once('value').then(function(snapshot) {
snapshot.forEach(function(typeSnapshot) {
typeSnapshot.forEach(function(posSnapshot) {
console.log('POSKEY', posSnapshot.key);
if(posSnapshot.key != 'status') {
console.log(rngPos, incr, posSnapshot.val().state);
if(rngPos == incr && posSnapshot.val().state == 0) {
console.log('===');
return(posSnapshot.val().case);
}
else if(rngPos == incr && posSnapshot.val().state == 1) {
return('1');
}
incr ++;
}
});
});
});
}
var loopPromise = new Promise(function(resolve, reject) {
DD = dbCall();
tatarget = DD.then(function(dbResult) {
console.log(dbResult);
return dbResult;
});
console.log('TARGETOUT', tatarget);
console.log('TARGETRESOLVE', tatarget);
resolve(tatarget);
});
loopPromise.then(function(loopResult) {
console.log(loopResult);
});
My problem is that the dbCall() function end AFTER the console.log !
I tried every promise, every callback functions, I also tried async and await but Firebase don't handle it.
I worked to this part of code for more than 15 hours.
Can somebody help me ?
Thanks !
This could always be organized better but basically you:
Return the Firebase ref promise from dbCall()
Wait for the promise with then()
Perform your desired functionality
resolve your promise, because loopPromise is a promise
function dbCall() {
var toReturn;
return admin.database().ref().child('games/' + event.params.gameId + '/player1/boats').once('value');
}
var loopPromise = new Promise(function(resolve, reject) {
dbCall().then(function(snapshot) {
snapshot.forEach(function(typeSnapshot) {
typeSnapshot.forEach(function(posSnapshot) {
console.log('POSKEY', posSnapshot.key);
if(posSnapshot.key != 'status') {
console.log(rngPos, incr, posSnapshot.val().state);
if(rngPos == incr && posSnapshot.val().state == 0) {
console.log('===');
resolve(posSnapshot.val().case);
}
else if(rngPos == incr && posSnapshot.val().state == 1) {
resolve('1');
}
incr ++;
}
});
});
print(dbResult);
});
});
loopPromise.then(function(loopResult) {
console.log(loopResult);
});
function print(tatarget) {
console.log('TARGETOUT', tatarget);
console.log('TARGETRESOLVE', tatarget);
}
Related
I have a piece of code:
var a = false;
function wait(milliseconds, async) {
if(!async) {
setTimeout(function() {
console.log('Sync timer done.');
a = true;
return true;
}, milliseconds*1000);
}
(...)
f_recipe.forEach(function(item, index) {
if (obj['actual_step'] != 0 && obj['actual_step'] != index ) {
e = "Desync";
throw e;
};
console.log("Step: " + obj.actual_step);
if(item.substr(item.length - 6) != "false)"){
if (eval(item)) {
obj['actual_step']++;
}
} else {
eval(item);
var ival = setInterval(function(){
if(a) {
console.log('do the next thing');
clearInterval(ival);
}
}, 1000);
}
});
But when I get to 'do the next thing'(interval complete), the forEach loop doesn't continue to the next element of the array. 'a' is set to true after timeout (kind of a synchronous wait in JS). f_recipes is a string array with function call (e.g. 'wait(20, false)').
How to get it to work?
What you're trying to do seems like a very bad idea, but promises can help with this (using Bluebird here because it provides Promise.delay and Promise.each):
function wait(seconds, dontActuallyWait) {
return dontActuallyWait ? null : Promise.delay(seconds * 1000);
}
function runSequence(things) {
return Promise.each(things, function(thing) {
return eval(thing);
});
}
runSequence([
'console.log("hello")',
'wait(2, false)',
'console.log("hello again")',
'wait(5, false)',
'console.log("goodbye")'
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.5.1/bluebird.min.js"></script>
Given the following snippet of code
var empowerInstance = null;
function onClick_btnSendMessage() {
var childIFrame = window.document.getElementById("editorFrame");
if (!empowerInstance) {
empowerInstance = EditorAPI.getInstance(childIFrame.contentWindow, window.location.origin);
}
empowerInstance.document.hasChanged(hasChangedCallback);
}
function hasChangedCallback(returnValue) {
console.log("empowerInstance.document.hasChanged = " + returnValue.isDirty);
if (returnValue.success === true && returnValue.isDirty === true) {
empowerInstance.document.save(saveCallback);
}
}
function saveCallback(returnValue) {
console.log("empowerInstance.document.save = " + returnValue.success);
if (returnValue.success === false) {
console.log(returnValue.message);
}
}
window.addEventListener("DOMContentLoaded", function (event) {
console.log("DOM fully loaded and parsed");
if (typeof location.origin === "undefined")
window.location.origin = window.location.protocol + "//" + window.location.host;
document.getElementById("btnSendMessage").addEventListener("click", onClick_btnSendMessage);
});
Instead of wiring the button up , I'd like to fire the code from the activation of a Bootstrap tab event.
$('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {
onClick_btnSendMessage(); // Naive way, as this does not wait
var target = $(e.target).attr("data-EditorUrl"); // activated tab
var childIFrame = $("#editorFrame");
childIFrame.attr("src", target);
});
So my question is "How do I wait on this function to complete before changing the source of childIFrame?".
empowerInstance.document.hasChanged(hasChangedCallback);
I conceptually understand the use of Promises and Callbacks, but writing one that functions correctly is a different story.
UPDATED
This version is refactored to eliminate the button handler, thus improving readability.
The usage is also important. When the page loads for the first time it is positioned on a tab. This tab is associated to a document that is hosted in an iFrame. If the user edits this document then tries to change tabs, I'd like to invoke the check for being dirty/save, then once saved, move to the next tab/document. There is also the case that switching between tabs/documents won't cause a save because the document is not dirty.
var empowerInstance = null;
function hasChangedCallback(returnValue) {
console.log("empowerInstance.document.hasChanged = " + returnValue.isDirty);
if (returnValue.success === true && returnValue.isDirty === true) {
empowerInstance.document.save(saveCallback);
}
}
function saveCallback(returnValue) {
console.log("empowerInstance.document.save = " + returnValue.success);
if (returnValue.success === false) {
console.log(returnValue.message);
}
}
$(function () {
if (typeof location.origin === "undefined") {
window.location.origin = window.location.protocol + "//" + window.location.host;
}
$('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {
var childIFrame = $("#editorFrame");
if (!empowerInstance) {
empowerInstance = EditorAPI.getInstance(childIFrame[0].contentWindow, window.location.origin);
}
empowerInstance.document.hasChanged(hasChangedCallback);// Need to wait for completion
var target = $(e.target).attr("data-EditorUrl"); // activated tab
childIFrame.attr("src", target);
});
});
Thank you,
Stephen
I've refactored your code to show how this can be done using promises.
function onClick_btnSendMessage() {
var childIFrame = window.document.getElementById("editorFrame");
if (!empowerInstance) {
empowerInstance = EditorAPI.getInstance(childIFrame.contentWindow, window.location.origin);
}
var doc = empowerInstance.document;
return hasChanged(doc).then(function() { return save(doc) })
}
function hasChanged(doc) {
return new Promise(function(resolve, reject) {
doc.hasChanged(function(returnValue) {
if (returnValue.success === true && returnValue.isDirty === true) {
resolve(returnValue)
} else {
reject(returnValue)
}
})
})
}
function save(doc) {
return new Promise(function(resolve, reject) {
doc.save(function(returnValue) {
if (returnValue.success === false) {
console.log(returnValue.message);
reject(returnValue)
} else {
resolve(returnValue)
}
})
})
}
// ------
$('a[data-toggle="tab"]').on("shown.bs.tab", function(e) {
onClick_btnSendMessage().then(function() {
var target = $(e.target).attr("data-EditorUrl"); // activated tab
var childIFrame = $("#editorFrame");
childIFrame.attr("src", target);
}).catch(function(error) {
// handle the error
console.error('Error!', error)
})
});
You can use some higher order functions to do what you want. Instead of passing the hasChangedCallback and saveCallback directly to the empowerInstance.document methods, you'll instead invoke a function that returns those callbacks, but also passes along your own callback that you'll call once all the async operations have finally completed. Here's what it'll look like:
$('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {
var target = $(e.target).attr("data-EditorUrl"); // activated tab
onClick_btnSendMessage(function () {
var childIFrame = $("#editorFrame");
childIFrame.attr("src", target);
});
});
function onClick_btnSendMessage(myCallback) {
var childIFrame = window.document.getElementById("editorFrame");
if (!empowerInstance) {
empowerInstance = EditorAPI.getInstance(childIFrame.contentWindow, window.location.origin);
}
empowerInstance.document.hasChanged(getHasChangedCallback(myCallback));
}
function getHasChangedCallback(myCallback) {
return function hasChangedCallback(returnValue, myCallback) {
console.log("empowerInstance.document.hasChanged = " + returnValue.isDirty);
if (returnValue.success === true && returnValue.isDirty === true) {
empowerInstance.document.save(getSaveCallback(myCallback));
}
}
}
function getSaveCallback(myCallback) {
return function saveCallback(returnValue) {
console.log("empowerInstance.document.save = " + returnValue.success);
if (returnValue.success === false) {
console.log(returnValue.message);
}
myCallback && myCallback(); // make sure myCallback isn't null before invoking
}
}
It's not exactly attractive, but it should get you what you want.
I have a function as below:
function foo(args1, args2, retry)
{
if (retry <= 0)
return false;
var isDone = callAnotherFunction(args1, args2);
if(!isDone) {
setInterval(function () {
foo(args1, args2, retry-1);
},
2000);
}
else
return true;
}
So I am not sure if the above implementation is correct. But I need to use this function in another function. And use the above function in an if block to decide if the other statement needs to be executed. Below is the usage of the above function.
function useIt(args1, args2)
{
// Other code
let store = function() {
if(!foo(args1, args2, 5)) {
cleanStorage(args1, args2);
return;
}
}
So the problem is in function useIt(), cleanStorage() does not wait for foo() to be executed if I am using setInterval or setTimeOut. So how do I need to implement the function foo() ? Kindly help me.
consider using promises
foo can be rewritten like this (I've replace setInterval with setTimeout):
function foo(args1, args2, retry) {
return new Promise(function (resolve, reject) {
if (retry <= 0)
reject();
var isDone = callAnotherFunction(args1, args2);
if (!isDone) {
setTimeout(function () {
resolve(foo(args1, args2, retry - 1));
}, 2000);
}
else
resolve(true);
})
}
and then use it like this:
function useIt(args1, args2) {
// Other code
let store = function () {
foo(args1, args2, 5).then(function () {
cleanStorage(args1, args2);
});
}
}
You should use Promises to do this
Something like this:
function foo(args1, args2, retry)
{
return new Promise(function(resolve, reject) {
if (retry <= 0)
reject();
var isDone = callAnotherFunction(args1, args2);
if(!isDone) {
setInterval(function () {
retry = retry - 1;
isDone = callAnotherFunction(args1, args2);
if (isDone)
resolve();
},
2000);
}
else
resolve();
}
}
function useIt(args1, args2)
{
// Other code
let store = function() {
foo(args1, args2, 5).then(result => {
cleanStorage(args1, args2);
return;
}
}
}
I am load HTML (external app) into an iFrame
I want to "do" something (callback) when an element becomes available in my iFrame. Here how I wrote it, and I'd like to write this with Promises instead:
function doWhenAvailable(selector, callback) {
console.warn("doWhenAvailable", selector)
if ($('#myiFrame').contents().find(selector).length) {
var elt = $('#myiFrame').contents().find(selector);
console.info("doWhenAvailable Found", elt)
callback && callback(elt);
} else {
setTimeout(function() {
doWhenAvailable(selector, callback);
}, 1000);
}
}
Actually instead of using setTimeout, I'd like to use setInterval to repeat the "find element" until it's found and resolve the "promise".
No, you would not use setInterval, you just would wrap the timeout in a promise and drop the callback:
function wait(t) {
return new Promise(function(resolve) {
setTimeout(resolve, t);
});
}
function whenAvailable(selector) {
var elt = $('#myiFrame').contents().find(selector);
if (elt.length)
return Promise.resolve(elt);
else
return wait(1000).then(function() {
return whenAvailable(selector);
});
}
Keeping your recursive style, it would have become something like that :
function doWhenAvailable(selector) {
var dfd = jQuery.Deferred();
console.warn("doWhenAvailable", selector)
if ($('#myiFrame').contents().find(selector).length) {
var elt = $('#myiFrame').contents().find(selector);
console.info("doWhenAvailable Found", elt)
return dfd.resolve(elt);
} else {
setTimeout(function() {
doWhenAvailable(selector).then(function(e) {
dfd.resolve(e);
});
}, config[env].wrapper.timeOutInMs);
}
return dfd.promise();
}
But I would have tried to avoid recursive calls here
The general idea is to return a promise instead of receiving a callback.
Example:
var xpto = function(res) {
return new Promise((resolve, reject) => {
if(res > 0) resolve('Is greater');
else reject(new Error('is lower'));
});
}
So in your case:
function doWhenAvailable(selector) {
function work(callback) {
if ($('#myiFrame').contents().find(selector).length) {
var elt = $('#myiFrame').contents().find(selector);
console.info("doWhenAvailable Found", elt)
callback(elt);
}
}
return new Promise((resolve, reject) => {
console.warn("doWhenAvailable", selector)
setInterval(() => work(resolve), 1000);
})
}
Here:
function doWhenAvailable(selector) {
return new Promise(function(resolve, reject){
console.warn("doWhenAvailable", selector)
if ($('#myiFrame').contents().find(selector).length) {
var elt = $('#myiFrame').contents().find(selector);
console.info("doWhenAvailable Found", elt)
resolve(elt);
} else {
setTimeout(function() {
doWhenAvailable(selector).then(function(data){
resolve(data);
});
}, config[env].wrapper.timeOutInMs);
}
}
}
And call your function like that:
doWhenAvailable("#elemId").then(function(elt){
//do what you want
});
I am new to jQuery Promises but I am using them fine in other parts of the app, but this one does not seem to be working as expected. Seems it is not waiting for the return before executing the next code.
function setActivityOnGrid(){
...snip...
var sameActivityCnt = $(actId).length;
if(sameActivityCnt){
sameActivityDialog().then(function(retVal) {
if(retVal == true){
activityid += "-"+sameActivityCnt++;
}
});
}
//code here is being executed before the dialog is even shown
}
function sameActivityDialog(){
var deferred = $.Deferred();
bootbox.confirm("You have already added this activity. Would you like to add it again?", function(result) {
deferred.resolve(result);
});
return deferred.promise();
}
Move the //code here is being executed before the dialog is even shown to here:
var sameActivityCnt = $(actId).length;
if(sameActivityCnt){
sameActivityDialog().then(function(retVal) {
if (retVal === true){
activityid += "-"+sameActivityCnt++;
}
// code goes here!!!!
});
}
Inside the then callback function (or later chained then functions).
Alternatives
var sameActivityCnt = $(actId).length;
sameActivityDialog().then(function(retVal) {
if(sameActivityCnt && retVal === true){
activityid += "-"+sameActivityCnt++;
}
// code goes here!!!!
});
or
var promise = sameActivityDialog();
var sameActivityCnt = $(actId).length;
if(sameActivityCnt){
promise = promise.then(function(retVal) {
if (retVal === true){
activityid += "-"+sameActivityCnt++;
}
return retVal;
});
}
promise = promise.then(function(retVal) {
// code goes here!!!!
return retVal;
});
And if you split this logic into smaller functions then you can actually compose this well:
function doIf(condition, fn) {
return function(data) {
if (condition) {
return fn(data);
} else {
return data
}
};
}
function appendID(retVal) {
if (retVal === true){
activityid += "-"+sameActivityCnt++;
}
return retVal;
}
function doMoreStuff(retVal) {
// code goes here!!!!
return retVal;
}
var sameActivityCnt = $(actId).length;
sameActivityDialog()
.then(doIf(sameActivityCnt, appendID))
.then(doMoreStuff);
The promise is working correctly. A promise doesn't make a non-blocking function block.
It gives you an object which you can repeatedly add new callbacks to which will run when the non-blocking function is done.