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);
}
I'm trying to create a function queue with several functions in it.
After the creation i want to execute each function in it's turn.
But these function have delayed instructions inside of them, so i want to wait for each of the functions to complete its execution before the continuing.
My attempts:
var funqueue = [];
funqueue.push( function() {fun1() });
funqueue.push( function() {fun2() });
funqueue.push( function() {fun3() });
executeFunctionQueue(funqueue);
Where the execute function is:
function executeFunctionQueue(funqueue){
var fun1=funqueue.pop;
$.when(fun1()).then(executeFunctionQueue(funqueue));
}
But this does not work.
How should i do it?
Try utilizing .queue() , .promise() ; see also Change easing functions on animations in jQuery queue
function fun1() {
return $.Deferred(function(dfd) {
setTimeout(function() {
dfd.resolve(1)
}, 1500)
}).promise().then(msg)
}
function fun2() {
return $.Deferred(function(dfd) {
setTimeout(function() {
dfd.resolve(2)
}, 1500)
}).promise().then(msg)
}
function fun3() {
return $.Deferred(function(dfd) {
setTimeout(function() {
dfd.resolve(3)
}, 1500)
}).promise().then(msg)
}
var funqueue = [];
funqueue.push(function() {
return fun1()
});
funqueue.push(function() {
return fun2()
});
funqueue.push(function() {
return fun3()
});
function msg(data) {
if (data === "complete") console.log(data)
else $("body").append(data + "<br>")
}
function executeFunctionQueue(funqueue) {
var deferred = funqueue.pop();
return deferred().then(function() {
// set `this` within `$.queue()` , `.then()` to empty object `{}`,
// or other object
return $({}).queue("fun", $.map(funqueue, function(fn) {
return function(next) {
// return `next` function in `"fun"` queue
return fn().then(next)
}
})).dequeue("fun").promise("fun")
.then(function() {
// return "complete" string when `fun` queue empty
return "complete"
})
});
}
executeFunctionQueue(funqueue)
.then(msg);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
Alternatively , using $.when()
function executeFunctionQueue(funqueue) {
return $.when(!!funqueue[funqueue.length - 1]
? funqueue.pop().call().then(function() {
return executeFunctionQueue(funqueue)})
: "complete")
}
executeFunctionQueue(funqueue)
.then(function(complete) {
console.log(complete)
});
function fun1() {
return $.Deferred(function(dfd) {
setTimeout(function() {
dfd.resolve(1)
}, 1500)
}).promise().then(msg)
}
function fun2() {
return $.Deferred(function(dfd) {
setTimeout(function() {
dfd.resolve(2)
}, 1500)
}).promise().then(msg)
}
function fun3() {
return $.Deferred(function(dfd) {
setTimeout(function() {
dfd.resolve(3)
}, 1500)
}).promise().then(msg)
}
var funqueue = [];
funqueue.push(function() {
return fun1()
});
funqueue.push(function() {
return fun2()
});
funqueue.push(function() {
return fun3()
});
function msg(data) {
if (data === "complete") console.log(data)
else $("body").append(data + "<br>")
}
function executeFunctionQueue(funqueue) {
return $.when(!!funqueue[funqueue.length - 1]
? funqueue.pop().call().then(function() {
return executeFunctionQueue(funqueue)})
: "complete")
}
executeFunctionQueue(funqueue)
.then(msg);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
If you have functions that return Promises, this can be done very simply with a function like sequence:
// sequence :: [(undefined -> Promise<undefined>)] -> Promise<undefined>
function sequence(fns) {
var fn = fns.shift();
return fn ? fn().then(sequence.bind(null, fns)) : Promise.resolve(undefined);
}
sequence assumes that your asynchronous/Promise-returning functions do not take any inputs and do not produce any outputs (that they are merely being called for side-effects.)
An example usage of the sequence function is:
sequence([f1, f2, f3]);
function f1() {
return new Promise(function (res) {
setTimeout(function () {
console.log('f1');
res();
}, 100);
});
}
function f2() {
return new Promise(function (res) {
setTimeout(function () {
console.log('f2');
res();
}, 1100);
});
}
function f3() {
return new Promise(function (res) {
setTimeout(function () {
console.log('f3');
res();
}, 10);
});
}
This will log out 'f1', 'f2', and 'f3' in order with the varying, specified time delays in between.
Use this
function executeFunctionQueue(funqueue){
if(!funqueue.length){
return
}
var fun1=funqueue.pop();
$.when(fun1()).then(function(){
executeFunctionQueue(funqueue)
});
}
Or even this if queued functions are not asynchronous.
function executeFunctionQueue(funqueue){
var fun=funqueue.pop();
fun()
if(!funqueue.length){
return
}
executeFunctionQueue(funqueue);
}
First create an array of functions as given:
var array_of_functions = [function1, function2, function3, function4];
When you want to execute a given function in the array try this:
array_of_functions[index]('mystring');
use deferred/promise pattern to execute functions on other function complete.
var createQueue = function () {
var d = $.Deferred(),
p = d.promise(),
triggerQueue = function () {
d.resolve();
};
return {
addToQueue: p.then,
triggerQueue: triggerQueue
}
};
var cq = createQueue();
cq.addToQueue(function () {
console.log("hi");
}).then(function () {
console.log("hello");
});
cq.triggerQueue();
In order to make a clean queue, your asynchronous functions will need to somehow signify when they are done, or the next function won't know when to begin. This means you cannot pass in just any old function; they'll need to follow some format. I'd suggest taking a done callback as the first parameter in your function calls. This way, you can support both synchronous and asynchronous functions.
var processQueue = function nextStep(queue) {
var next = queue.shift();
next && next(function() { nextStep(queue); });
}
function fun1(done) {
setTimeout(function() {
console.info('1');
done();
}, 1000);
}
function fun2(done) {
console.info('2');
done();
}
processQueue([fun1, fun2]);
// >> 1 second wait
// >> 1
// >> 2
Using the async module for JS, I need to retrieve values from two functions running in parallel and then use them on a callback that returns a final true/false value.
There seems to be a problem with the async scope, since I can't retrieve the return value from the callback. Any ideas on how to do this?
This is the code. It's basically a validator for received values:
$.validator.addMethod('verifySystem', function (value, element) {
var data = value.split(':');
var respuesta;
async.series([
function (callback) {
if( data.length === 3){
// is this format the correct one?
if ((data[1] == 'testi' || data[1] == 'tes') && data[2].length == 6 && data[0].length == 7){
callback(null, 'ok');
} else {
callback('Error in format',null);
}
} else {
callback('Error in format', null);
}
},
function (callback) {
// does the document exist?
var ajaxverify = function() {
return $.ajax({
url: 'db_test/' + value
});
};
ajaxverify()
.done(function(result) {
callback(null, 'ok');
})
.fail(function(error) {
callback('not_found', null);
});
}
],
function (errors, results) {
if (errors){
return false;
} else {
return true;
}
});
}, "error message");
So, I've searched for this high and low and maybe I'm just having trouble understanding jQuery's deferred function or I'm completely on the wrong track. So any help would be appreciated folks!
I basically have a custom jQuery function messager that displays a message with a fadeOut and fadeIn.
(function ( $ ) {
$.fn.messager = function(message, effect, speed) {
$(this).fadeOut(speed).delay(speed).text(message).fadeIn(speed);
return this;
};
}( jQuery ));
So, I have a div called $elem and when $elem.messager gets called multiple times (with different messages), I would like the messager function to wait till its last call has finished. As in the last FadeIn has finished. Because currently what's happening is that the second call of the function is overwriting the animation effect of the first call of the function.
Any ideas?
jQuery Deferred Way
jQuery Deferred object (roughly compromising CommonJS Promises API) can help us managing queued operations. Here is my implementation of queuing messages. You can pass through multiple messages as an array in one call, or synchronize different message boards easily because #messager() returns jQuery object itself but also wrapped as a promise object which will be resolved just when message(s) being displayed.
(function ($) {
function awaits($el) {
var awaits = $el.data('_awaits');
awaits || $el.data('_awaits', awaits = []);
return awaits;
}
function resolveNext(curr /*, ignored */) {
var head = awaits(this).shift();
if (head === curr) {
resolveNext.call(this, 'not await');
} else {
head && head.resolve();
}
}
function display(message, speed) {
var $self = this, await = $.Deferred(), willDone = $.Deferred();
awaits($self).push(await) > 1 || await.resolve();
await.done(function() {
function reveal() {
$self.text(message).fadeIn(speed, function() {
resolveNext.call($self, await);
willDone.resolve();
});
}
$self.fadeOut(speed/2, reveal);
});
return willDone.promise(this);
};
$.fn.messager = function(message, speed) {
speed = speed || 500;
if ($.isArray(message)) {
var arr = [];
message.forEach(function(m) {
arr.push(display.call(this, m, speed));
}, this);
return $.when.apply(this, arr);
} else {
return display.call(this, message, speed);
}
}
}( jQuery ));
function play() {
$('#msgbox1').messager(['A demo of', 'queued messages'], 1000);
for (var i = 3; i > 0; i--) $('#msgbox1').messager(i);
$('#msgbox1').messager(['Ready to sing...', 'Singing...']);
for (var i = 8; i > 0; i--) $('#msgbox2').messager('***');
for (i = 1; i < 8; i++) $('#msgbox2').messager(String.fromCharCode(64 + i));
$('#msgbox2')
.messager('')
.done(function() {
$('#msgbox1')
.messager(['End of demo.', 'Thank you.', 'Run again?'], 1000)
.done(function() {
$('#msgbox1, #msgbox2').one('click', play);
$('#msgbox2').messager('>');
});
});
}
play();
html {
background: rgba(0, 0, 0, 0.25);
}
#msgbox1, #msgbox2 {
color: #FFF;
padding: 0.3em 0.5em;
font-size: 36pt;
text-align: center;
height: 1.8em;
cursor: default;
}
#msgbox2 {
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Queuing Messages with jQuery Deferred Object</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="msgbox1"></div>
<div id="msgbox2"></div>
</body>
</html>
Edit, Updated
Try
(function ($) {
$.fn.messager = messager;
function messager(message, speed, callback) {
var that = $(this);
if (that.data("queue") === undefined) {
$.fx.interval = 0;
that.data("queue", []);
that.data("msg", []);
};
var q = that.data("queue"),
msgs = that.data("msg");
q.push([message, speed, callback]);
msgs.push(message);
var fn = function (m, s, cb) {
return that.fadeOut(s, function () {
that.text(m)
})
.delay(s)
.fadeIn(s, cb)
.promise("fx")
.done(function (el) {
console.log("callback", q.length);
if (q.length > 1) {
q.splice(0, 1);
fn.apply(el, q[0])
} else {
el.data("queue", []);
console.log("done", el.data("queue").length);
always(promise, ["complete", msgs])
.then(complete);
}
return el.promise("fx");
})
}
, promise = $.when(!that.queue("fx").length
? fn.apply(that, q[0])
: that.promise("fx"))
, always = function (elem, args) {
if (elem.state() === "pending") {
console.log(elem.state(), args)
} else {
if (elem.state() === "resolved") {
elem.done(function (elem) {
console.log(msgs.length + " messages complete");
})
};
};
return elem.promise("fx")
};
always(promise, ["start", message, q.length]);
return that
};
}(jQuery));
See .promise()
(function ($) {
$.fn.messager = messager;
function messager(message, speed, callback) {
var that = $(this);
if (that.data("queue") === undefined) {
$.fx.interval = 0;
that.data("queue", []);
that.data("msg", []);
};
var q = that.data("queue"),
msgs = that.data("msg");
q.push([message, speed, callback]);
msgs.push(message);
var fn = function (m, s, cb) {
return that.fadeOut(s, function () {
that.text(m)
})
.delay(s)
.fadeIn(s, cb)
.promise("fx")
.done(function (el) {
console.log("callback", q.length);
if (q.length > 1) {
q.splice(0, 1);
fn.apply(el, q[0])
} else {
el.data("queue", []);
console.log("done", el.data("queue").length);
always(promise, ["complete", msgs])
.then(complete);
}
return el.promise("fx");
})
}
, promise = $.when(!that.queue("fx").length
? fn.apply(that, q[0])
: that.promise("fx"))
, always = function (elem, args) {
if (elem.state() === "pending") {
console.log(elem.state(), args)
} else {
if (elem.state() === "resolved") {
elem.done(function (elem) {
console.log(msgs.length + " messages complete");
})
};
};
return elem.promise("fx")
};
always(promise, ["start", message, q.length]);
return that
};
}(jQuery));
var complete = function() {
if (!$("pre").is("*")) {
$("body").append("<pre>" + JSON.stringify($(this).data("msg"), null, 4))
} else {
$("pre")
.text(JSON.stringify($(this).data("msg"), null, 4));
$("label[for=messages]").text("messages updated")
.show(0).delay(350).hide(0)
};
};
var fx = function() {
$(this).css("color", "purple").animate({
fontSize: "72"
}, 100, function() {
$(this).animate({
fontSize: "36"
}, 100, function() {
$(this).css("color", "inherit")
})
})
};
var input = $("input");
var $elem = $("#messages");
$elem.messager("0", 1000)
.messager("1", 100)
.messager("2", 200)
.messager("3", 300)
.messager("4", 400)
.messager("5", 500)
.messager("6", 600)
.messager("7", 700)
.messager("8", 800)
.messager("9", 900);
$.each("abcdefghijklmnopqrstuvwxyz".split(""), function(key, val) {
$elem.messager(val, 200, fx);
});
$("button").on("click", function() {
$elem.messager(input.val().length > 0 ? input.val() : $.now(), 200);
input.val("")
});
#messages {
display:block;
height:38px;
font-size:36px;
position : absolute;
}
label[for=messages] {
color:blue;
}
pre {
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="button">add messages</label> <label for="messages"></label><br>
<input type="text" /><button>click</button>
<br />
<div id="messages">messages</div>
<br><br>
<script>
(function ( $ ) {
$.fn.messager = function(message, effect, speed, gothru) {
if (!$(this).data('message'))
{
$(this).data('message', Array());
}
$(this).data('message').push({messageContent: message, messageEffect: effect, messageSpeed: speed});
if ($(this).data('message').length > 1 && gothru != true)
{
return;
}
$(this).fadeOut(speed).delay(speed).text(message).fadeIn(speed, function(){
$(this).data("message").shift();
if ($(this).data('message').length > 0)
{
var arrMessage = $(this).data('message');
var messageContent = arrMessage[0].messageContent;
var messageEffect= arrMessage[0].messageEffect;
var messageSpeed= arrMessage[0].messageSpeed;
$(this).data("message").shift();
$(this).messager(messageContent , messageEffect, messageSpeed, true);
}
});
return this;
};
}( jQuery ));
</script>
It's good now.
The naive way of doing it recursively:
Make a global variable(boolean), in this case called queue. If queue is false, set it to true and begin executing the code you want to run. When that code finishes, set queue back to false. Otherwise, if queue was true, just recursively call _this.messager() until queue is set back to false, which would mean that the code is finished running.
fadeIn() and fadeOut() can take callbacks as the final argument, so I'm utilizing that here.
HTML:
<div id="messageBox"></div>
javaScript:
(function ( $ ) {
var queue = false;
$.fn.messager = function(message, effect, speed) {
var _this = $(this);
if (!queue) {
queue = true;
_this.fadeOut(speed, function() {
_this.text(message);
_this.fadeIn(speed, function() {
queue = false;
});
});
} else {
_this.messager(message, effect, speed);
}
return this;
};
}( jQuery ));
$('#messageBox').messager('One', 300);
$('#messageBox').messager('Two', 300);
$('#messageBox').messager('Three', 300);
This typically results in:
Uncaught RangeError: Maximum call stack size exceeded
A more advanced example:
Here we create a second variable called counter to keep track of how many times 'messager' is called recursively and doesn't exceed the limit specified in the options. I set a default of 50, which can be overwritten by the options parameter.
In addition, we've separated out the code that you want to run. This could even be multiple functions that call each other, the important bit is making sure that when your code is finished running, you set queue to false rather than returning false and setting queue to the result of the function. Setting it to the result of the function just makes it undefined until the function finishes returning. We want it to remain as true until the code is finished executing.
This example also throttles the recursive calling so that it's only called once every 100 milliseconds, although that too can be overwritten with whatever value you like (in milliseconds) via the options parameter.
HTML:
<div id="messageBox"></div>
javaScript:
(function( $ ) {
var queue = false;
var counter = 0;
$.fn.messager = function(message, effect, speed, options) {
var _S = $.extend({
throttle: 100,
counter: 50
}, options);
var _this = $(this);
counter += 1;
function codeToRun() {
_this.fadeOut(speed, function() {
_this.text(message);
_this.fadeIn(speed, function() {
queue = false;
});
});
}
if (!queue) {
queue = true;
codeToRun();
counter = 0;
} else {
if (counter < _S.counter) {
setTimeout(function() {
_this.messager(message, effect, speed);
}, _S.throttle);
}
}
return this;
};
})( jQuery );
$('#messageBox').messager('One', 300);
$('#messageBox').messager('Two', 300);
$('#messageBox').messager('Three', 300);
For some reason, calling methods on $(this) directly gives me:
[Window, jquery: "1.11.0", constructor: function, selector: "", toArray: function, get: function…]
But storing $(this) in a variable and calling methods on that variable gives me the correct element:
[div#messageBox, selector: "#messageBox", context: document, jquery: "1.11.0", constructor: function, toArray: function…]
I have the following function :
var appendStructure = {
init : function(wrapper,structure,cls,callback) {
$(wrapper).appendTo(container).hide()
var object = $(container).find(cls);
$(structure.join('')).appendTo(object);
showObj(object,function() {
if(opts.centerObj == true) {
$(window).resize(function() {
var cssProps = getProps(object);
object.css(cssProps);
});
}
if(typeof callback == 'function') {
callback();
}
});
}
}
And the other functions that are called within it:
var getProps = function(obj) {
return {
'position' :'absolute',
'top' : (($(window).height() - $(obj).outerHeight()) / 2)+'px',
'left' : (($(window).width() - $(obj).outerWidth()) / 2)+'px'
}
}
var showObj = function(obj,callback) {
return setTimeout(function () {
if(opts.centerObj == true) {
var cssProps = getProps(obj);
obj.css(cssProps).fadeIn('slow');
}
else {
obj.fadeIn('slow');
}
if(typeof callback == 'function') {
callback();
}
}, 1500);
}
And I run the function like this:
if(appendStructure.init(wrapper.login,structure.login,'.content-login')){
console.log('Object Appended');
}
else {
console.log('Error');
}
My question is, why is the console outputting Error, because the function actually works and everything that is suppose to happen, happens ?
appendStructure.init does not return any value, hence the return value will be undefined. undefined evaluates to false, so the else branch of your if...else statement is executed.