We Keep Coding

My timer in cloud function stop after the second call

My app is a multi-player game in which the player can create a session, each session has a unique sessionID and contains many rounds, and each round has its own timer.
I did a cloud function for implementing a timer. It works well, but if session1 starts its timer and then session2 starts its own timer. What happens is the timer in session1 stops!
The function I wrote it by javascript, and it updates the timer in a real-time database in firebase every second.
the cloud function code
exports.RoundTimerS = functions.database.ref('/Sessions/{sessionid}/onCamera')
.onCreate((snap, context) => {
var SessionID = context.params.sessionid
sessionref4 = "/Sessions/".concat(SessionID);
sessionref4 = sessionref4.concat("/Timer");
sessionref5 = "/Sessions/".concat(SessionID);
sessionref5 = sessionref5.concat("/numOfPlayers");
sessionref6 = "/Sessions/".concat(SessionID);
sessionref6 = sessionref6.concat("/NumberOfFinish");
Roundtimer = 60 //60s
var player = 0
var db = admin.database();
var ref = db.ref(sessionref5);
var ref2 = db.ref(sessionref6);
ref.once("value", function (snapshot2) {
player = snapshot2.val()
}, function (errorObject) {
console.log("The read failed: " + errorObject.code);
});
var Timer = setInterval(function () {
admin.database()
.ref(sessionref4 + "/Roundtimer1").set(Roundtimer)
ref2.once("value", function (snapshot) {
if (snapshot.numChildren() == player) {
clearInterval(Timer)//Stop timer
}
}, function (errorObject) {
console.log("The read failed: " + errorObject.code);
});
if (Roundtimer <= 0) { //Round Timer finish
admin.database()
.ref(sessionref4 + "/Roundtimer1").set(Roundtimer)
clearInterval(Timer)//Stop timer
}
Roundtimer -= 1

Cloud Functions run until the final } of their code, which is well before your timer is finished. So your container gets recycled before the timer finished.
If you want the container to stay alive for any asynchronous operations, you need to return a promise that resolves once all work is done.
exports.RoundTimerS = functions.database.ref('/Sessions/{sessionid}/onCamera')
.onCreate((snap, context) => {
return new Promise((resolve, reject) => {
var SessionID = context.params.sessionid
sessionref4 = "/Sessions/".concat(SessionID);
sessionref4 = sessionref4.concat("/Timer");
sessionref5 = "/Sessions/".concat(SessionID);
sessionref5 = sessionref5.concat("/numOfPlayers");
sessionref6 = "/Sessions/".concat(SessionID);
sessionref6 = sessionref6.concat("/NumberOfFinish");
Roundtimer = 60 //60s
var player = 0
var db = admin.database();
var ref = db.ref(sessionref5);
var ref2 = db.ref(sessionref6);
ref.once("value", function (snapshot2) {
player = snapshot2.val()
}, function (errorObject) {
console.log("The read failed: " + errorObject.code);
});
var Timer = setInterval(function () {
db.ref(sessionref4 + "/Roundtimer1").set(Roundtimer)
ref2.once("value", function (snapshot) {
if (snapshot.numChildren() == player) {
clearInterval(Timer)//Stop timer
}
}, function (errorObject) {
console.log("The read failed: " + errorObject.code);
});
if (Roundtimer <= 0) { //Round Timer finish
db.ref(sessionref4 + "/Roundtimer1").set(Roundtimer).then(() =
> {
resolve(); // this seems to be where your timer is done
})
clearInterval(Timer)//Stop timer
}
Roundtimer -= 1
...
});
Note that this is not meant to be a copy/paste solution, but rather an outline of the approach you should take. Which is:
Return a promise.
Resolve that the the work is done.
I highly recommend reading up on asynchronous work in Cloud Functions, as you'll keep running into problems until you've got that under control. Some good resources:
The documentation on Sync, async, and promises
Doug's video series on Learn JavaScript Promises with HTTP Triggers in Cloud Functions

waitForSelector timeout option doesn't work

I keep trying to use a variable as the timeout value but it never seems to work.
var b = data1.raw_time.split(' ');
console.log(b[1]);
let time = parseInt(b[1], 10) * 60000;
console.log(time);
message.channel.send('Server is in queue for ' + b[1] + ' minutes!');
try {
await page.waitForSelector('.main #confirm', { timeout: time });
await page.click('.main #confirm');
} catch (error) {
message.channel.send('Server start sequence was aborted');
}
}
Am I doing something wrong ?

how do i create a RXJS pausable data flow that doesnt reset on each resume?

i have tried out the documented example for RXJS pausable and while it pauses ok it resets on resume. how do i modify the example below to have my stream resume from where i paused it rather than reset?
var pauser = new Rx.Subject();
var source = Rx.Observable
.interval(1000)
.timeInterval()
.pausable(pauser);
var subscription = source.subscribe(
function (x) {
$("#result").append('Next: ' + JSON.stringify(x) + '<br>');
},
function (err) {
$("#result").append('Error: ' + err);
},
function () {
$("#result").append('Completed');
});
pauser.onNext(true);
var paused = false;
$("#result").click(function() {
$(this).append("mouse clicked");
paused = (paused === false) ? true : false;
pauser.onNext(paused);
});
this is giving me the following output:
Next: {"value":0,"interval":1002}
Next: {"value":1,"interval":1000}
Next: {"value":2,"interval":999}
mouse clicked
mouse clicked
Next: {"value":0,"interval":1001}
Next: {"value":1,"interval":999}
Next: {"value":2,"interval":1000}

As mentioned in the pausable documentation, pausable is to be used on hot sources.
One way to make a source hot is to use share. However, this will not work as is in conjunction with pausable because share will disconnect its source when it has no subscribers, which will happen when you will pause.
So here are two ways to make this work. One is to use share and keep a dummy subscriber so that share never disconnects from its source as there will always be at least one subscriber. The second way is to use publish, and connect the observable once all the wiring has been made.
Example 1 with dummy subscriber:
var pauser = new Rx.Subject();
function noop(){}
var source = Rx.Observable
.interval(1000)
.timeInterval()
.share();
var pausableSource = source.pausable(pauser);
var subscription = pausableSource.subscribe(
function (x) {
$("#ta_result").append('Next: ' + JSON.stringify(x) + '<br>');
},
function (err) {
$("#ta_result").append('Error: ' + err);
},
function () {
$("#ta_result").append('Completed');
});
source.subscribe(noop);
pauser.onNext(false);
var paused = false;
$("#result").click(function() {
$("#ta_change").append("mouse clicked\n");
paused = !paused;
pauser.onNext(paused);
});
Example 2 with connect:
var pauser = new Rx.Subject();
var source = Rx.Observable
.interval(1000)
.timeInterval()
.publish();
var pausableSource = source.pausable(pauser);
// source.subscribe(function(){});
var subscription = pausableSource.subscribe(
function (x) {
$("#ta_result").append('Next: ' + JSON.stringify(x) + '<br>');
},
function (err) {
$("#ta_result").append('Error: ' + err);
},
function () {
$("#ta_result").append('Completed');
});
source.connect();
pauser.onNext(false);
var paused = false;
$("#result").click(function() {
$("#ta_change").append("mouse clicked\n");
paused = !paused;
pauser.onNext(paused);
});

Wait until setInterval() is done

I would like to add a small dice-rolling effect to my Javascript code. I think a good way is to use the setInterval() method. My idea was the following code (just for testing):
function roleDice() {
var i = Math.floor((Math.random() * 25) + 5);
var j = i;
var test = setInterval(function() {
i--;
document.getElementById("dice").src = "./images/dice/dice" + Math.floor((Math.random() * 6) + 1) + ".png";
if (i < 1) {
clearInterval(test);
}
}, 50);
}
Now I would like to wait for the setInterval until it is done. So I added a setTimeout.
setTimeout(function(){alert("test")}, (j + 1) * 50);
This code works quite okay.
But in my main code the roleDice() function returns a value. Now I don’t know how I could handle that... I can’t return from the setTimeout(). If I add a return to the end of the function, the return will rise too fast. Does anyone have an idea, of how I could fix that?
Edit
Hmm, okay I understand what the callback does and I think I know how it works but I have still the problem. I think it’s more of an "interface" problem...
Here is my code:
function startAnimation(playername, callback) {
var i = Math.floor((Math.random() * 25) + 5);
var int = setInterval(function() {
i--;
var number = Math.floor((Math.random() * 6) + 1);
document.getElementById("dice").src = "./images/dice/dice" + number + ".png";
if(i < 1) {
clearInterval(int);
number = Math.floor((Math.random() * 6) + 1);
addText(playername + " rolled " + number);
document.getElementById("dice").src = "./images/dice/dice" + number + ".png";
callback(number);
}
}, 50);
}
function rnd(playername) {
var callback = function(value){
return value; // I knew thats pointless...
};
startAnimation(playername, callback);
}
The function rnd() should wait and return the value… I’m a little bit confused. At the moment I have no clue how to going on... The code wait for the var callback... but how I could combine it with the return? I would like to run the animation and return after that the last number with rnd() to another function.

You stumbled into the pitfall most people hit at some point when they get in touch with asynchronous programming.
You cannot "wait" for an timeout/interval to finish - trying to do so would not work or block the whole page/browser. Any code that should run after the delay needs to be called from the callback you passed to setInterval when it's "done".
function rollDice(callback) {
var i = Math.floor((Math.random() * 25) + 5);
var j = i;
var test = setInterval(function() {
i--;
var value = Math.floor((Math.random() * 6) + 1);
document.getElementById("dice").src = "./images/dice/dice" + value + ".png";
if(i < 1) {
clearInterval(test);
callback(value);
}
}, 50);
}
You then use it like this:
rollDice(function(value) {
// code that should run when the dice has been rolled
});

You can now use Promises and async/await
Like callbacks, you can use Promises to pass a function that is called when the program is done running. If you use reject you can also handle errors with Promises.
function rollDice() {
return new Promise((resolve, reject) => {
const dice = document.getElementById('dice');
let numberOfRollsLeft = Math.floor(Math.random() * 25 + 5);
const intervalId = setInterval(() => {
const diceValue = Math.floor(Math.random() * 6 + 1);
// Display the dice's face for the new value
dice.src = `./images/dice/dice${diceValue}.png`;
// If we're done, stop rolling and return the dice's value
if (--numberOfRollsLeft < 1) {
clearInterval(intervalId);
resolve(diceValue);
}
}, 50);
});
}
Then, you can use the .then() method to run a callback when the promise resolves with your diceValue.
rollDice().then((diceValue) => {
// display the dice's value to the user via the DOM
})
Or, if you're in an async function, you can use the await keyword.
async function takeTurn() {
// ...
const diceValue = await rollDice()
// ...
}

Orginally your code was all sequential. Here is a basic dice game where two players roll one and they see who has a bigger number. [If a tie, second person wins!]
function roleDice() {
return Math.floor(Math.random() * 6) + 1;
}
function game(){
var player1 = roleDice(),
player2 = roleDice(),
p1Win = player1 > player2;
alert( "Player " + (p1Win ? "1":"2") + " wins!" );
}
game();
The code above is really simple since it just flows. When you put in a asynchronous method like that rolling the die, you need to break up things into chunks to do processing.
function roleDice(callback) {
var i = Math.floor((Math.random() * 25) + 5);
var j = i;
var test = setInterval(function(){
i--;
var die = Math.floor((Math.random() * 6) + 1);
document.getElementById("dice").src = "./images/dice/dice" + die + ".png";
if(i < 1) {
clearInterval(test);
callback(die); //Return the die value back to a function to process it
}
}, 50);
}
function game(){
var gameInfo = { //defaults
"p1" : null,
"p2" : null
},
playerRolls = function (playerNumber) { //Start off the rolling
var callbackFnc = function(value){ //Create a callback that will
playerFinishes(playerNumber, value);
};
roleDice( callbackFnc );
},
playerFinishes = function (playerNumber, value) { //called via the callback that role dice fires
gameInfo["p" + playerNumber] = value;
if (gameInfo.p1 !== null && gameInfo.p2 !== null ) { //checks to see if both rolls were completed, if so finish game
giveResult();
}
},
giveResult = function(){ //called when both rolls are done
var p1Win = gameInfo.p1 > gameInfo.p2;
alert( "Player " + (p1Win ? "1":"2") + " wins!" );
};
playerRolls("1"); //start player 1
playerRolls("2"); //start player 2
}
game();
The above code could be better in more of an OOP type of way, but it works.

There are a few issues for the above solutions to work. Running the program doesn't (at least not in my preferred browser) show any images, so these has to be loaded before running the game.
Also, by experience I find the best way to initiate the callback method in cases like preloading N images or having N players throw a dice is to let each timeout function do a countdown to zero and at that point execute the callback. This works like a charm and does not rely on how many items needing to be processed.
<html><head><script>
var game = function(images){
var nbPlayers = 2, winnerValue = -1, winnerPlayer = -1;
var rollDice = function(player,callbackFinish){
var playerDice = document.getElementById("dice"+player);
var facesToShow = Math.floor((Math.random() * 25) + 5);
var intervalID = setInterval(function(){
var face = Math.floor(Math.random() * 6);
playerDice.src = images[face].src;
if (--facesToShow<=0) {
clearInterval(intervalID);
if (face>winnerValue){winnerValue=face;winnerPlayer=player}
if (--nbPlayers<=0) finish();
}
}, 50);
}
var finish = function(){
alert("Player "+winnerPlayer+" wins!");
}
setTimeout(function(){rollDice(0)},10);
setTimeout(function(){rollDice(1)},10);
}
var preloadImages = function(images,callback){
var preloads = [], imagesToLoad = images.length;
for (var i=0;i<images.length;++i){
var img=new Image();
preloads.push(img);
img.onload=function(){if(--imagesToLoad<=0)callback(preloads)}
img.src = images[i];
}
}
preloadImages(["dice1.png","dice2.png","dice3.png","dice4.png","dice5.png","dice6.png"],game);
</script></head><body>
<img src="" id="dice0" /><img src="" id="dice1" /></body></html>

To achieve that goal, using vanilla setInterval function is simply impossible. However, there is better alternative to it: setIntervalAsync.
setIntervalAsync offers the same functionality as setInterval, but it guarantees that the function will never executed more than once in a given interval.
npm i set-interval-async
Example:
setIntervalAsync(
() => {
console.log('Hello')
return doSomeWork().then(
() => console.log('Bye')
)
},
1000
)

Example with Promises & setIntervals.. this is how I created a 'flat' chain of functions that wait until the other is completed...
The below snippet uses a library called RobotJS (here it returns a color at a specific pixel on screen) to wait for a button to change color with setInterval, after which it resolves and allows the code in the main loop to continue running.
So we have a mainChain async function, in which we run functions that we declare below. This makes it clean to scale, by just putting all your await someFunctions(); one after each other:
async function mainChain() {
await waitForColorChange('91baf1', 1400, 923)
console.log('this is run after the above finishes')
}
async function waitForColorChange(colorBeforeChange, pixelColorX, pixelColorY) {
return new Promise((resolve, reject) => {
let myInterval = setInterval(() => {
let colorOfNextBtn = robot.getPixelColor(pixelColorX, pixelColorY)
if (colorOfNextBtn == colorBeforeChange) {
console.log('waiting for color change')
} else {
console.log('color has changed')
clearInterval(myInterval);
resolve();
}
}, 1000)
})
}
//Start the main function
mainChain()

Wait until a condition is true?

I'm using navigator.geolocation.watchPosition in JavaScript, and I want a way to deal with the possibility that the user might submit a form relying on location before watchPosition has found its location.
Ideally the user would see a 'Waiting for location' message periodically until the location was obtained, then the form would submit.
However, I'm not sure how to implement this in JavaScript given its lack of a wait function.
Current code:
var current_latlng = null;
function gpsSuccess(pos){
//console.log('gpsSuccess');
if (pos.coords) {
lat = pos.coords.latitude;
lng = pos.coords.longitude;
}
else {
lat = pos.latitude;
lng = pos.longitude;
}
current_latlng = new google.maps.LatLng(lat, lng);
}
watchId = navigator.geolocation.watchPosition(gpsSuccess,
gpsFail, {timeout:5000, maximumAge: 300000});
$('#route-form').submit(function(event) {
// User submits form, we need their location...
while(current_location==null) {
toastMessage('Waiting for your location...');
wait(500); // What should I use instead?
}
// Continue with location found...
});

Modern solution using Promise
function waitFor(conditionFunction) {
const poll = resolve => {
if(conditionFunction()) resolve();
else setTimeout(_ => poll(resolve), 400);
}
return new Promise(poll);
}
Usage
waitFor(_ => flag === true)
.then(_ => console.log('the wait is over!'));
or
async function demo() {
await waitFor(_ => flag === true);
console.log('the wait is over!');
}
References
Promises
Arrow Functions
Async/Await

Personally, I use a waitfor() function which encapsulates a setTimeout():
//**********************************************************************
// function waitfor - Wait until a condition is met
//
// Needed parameters:
// test: function that returns a value
// expectedValue: the value of the test function we are waiting for
// msec: delay between the calls to test
// callback: function to execute when the condition is met
// Parameters for debugging:
// count: used to count the loops
// source: a string to specify an ID, a message, etc
//**********************************************************************
function waitfor(test, expectedValue, msec, count, source, callback) {
// Check if condition met. If not, re-check later (msec).
while (test() !== expectedValue) {
count++;
setTimeout(function() {
waitfor(test, expectedValue, msec, count, source, callback);
}, msec);
return;
}
// Condition finally met. callback() can be executed.
console.log(source + ': ' + test() + ', expected: ' + expectedValue + ', ' + count + ' loops.');
callback();
}
I use my waitfor() function in the following way:
var _TIMEOUT = 50; // waitfor test rate [msec]
var bBusy = true; // Busy flag (will be changed somewhere else in the code)
...
// Test a flag
function _isBusy() {
return bBusy;
}
...
// Wait until idle (busy must be false)
waitfor(_isBusy, false, _TIMEOUT, 0, 'play->busy false', function() {
alert('The show can resume !');
});

This is precisely what promises were invented and implemented (since OP asked his question) for.
See all of the various implementations, eg promisejs.org

You'll want to use setTimeout:
function checkAndSubmit(form) {
var location = getLocation();
if (!location) {
setTimeout(checkAndSubmit, 500, form); // setTimeout(func, timeMS, params...)
} else {
// Set location on form here if it isn't in getLocation()
form.submit();
}
}
... where getLocation looks up your location.

You could use a timeout to try to re-submit the form:
$('#route-form').submit(function(event) {
// User submits form, we need their location...
if(current_location==null) {
toastMessage('Waiting for your location...');
setTimeout(function(){ $('#route-form').submit(); }, 500); // Try to submit form after timeout
return false;
} else {
// Continue with location found...
}
});

export default (condition: Function, interval = 1000) =>
new Promise((resolve) => {
const runner = () => {
const timeout = setTimeout(runner, interval);
if (condition()) {
clearTimeout(timeout);
resolve(undefined);
return;
}
};
runner();
});

class App extends React.Component {
componentDidMount() {
this.processToken();
}
processToken = () => {
try {
const params = querySearch(this.props.location.search);
if('accessToken' in params){
this.setOrderContext(params);
this.props.history.push(`/myinfo`);
}
} catch(ex) {
console.log(ex);
}
}
setOrderContext (params){
//this action calls a reducer and put the token in session storage
this.props.userActions.processUserToken({data: {accessToken:params.accessToken}});
}
render() {
return (
<Switch>
//myinfo component needs accessToken to retrieve my info
<Route path="/myInfo" component={InofUI.App} />
</Switch>
);
}
And then inside InofUI.App
componentDidMount() {
this.retrieveMyInfo();
}
retrieveMyInfo = async () => {
await this.untilTokenIsSet();
const { location, history } = this.props;
this.props.processUser(location, history);
}
untilTokenIsSet= () => {
const poll = (resolve) => {
const { user } = this.props;
const { accessToken } = user;
console.log('getting accessToken', accessToken);
if (accessToken) {
resolve();
} else {
console.log('wating for token .. ');
setTimeout(() => poll(resolve), 100);
}
};
return new Promise(poll);
}

Try using setInterval and clearInterval like this...
var current_latlng = null;
function gpsSuccess(pos) {
//console.log('gpsSuccess');
if (pos.coords) {
lat = pos.coords.latitude;
lng = pos.coords.longitude;
} else {
lat = pos.latitude;
lng = pos.longitude;
}
current_latlng = new google.maps.LatLng(lat, lng);
}
watchId = navigator.geolocation.watchPosition(gpsSuccess,
gpsFail, {
timeout: 5000,
maximumAge: 300000
});
$('#route-form').submit(function (event) {
// User submits form, we need their location...
// Checks status every half-second
var watch = setInterval(task, 500)
function task() {
if (current_latlng != null) {
clearInterval(watch)
watch = false
return callback()
} else {
toastMessage('Waiting for your location...');
}
}
function callback() {
// Continue on with location found...
}
});

This accepts any function, even if it's async, and when it evaluates to a truthy value (checking every quarter-second by default), resolves to it.
function waitFor(condition, step = 250, timeout = Infinity) {
return new Promise((resolve, reject) => {
const now = Date.now();
let running = false;
const interval = setInterval(async () => {
if (running) return;
running = true;
const result = await condition();
if (result) {
clearInterval(interval);
resolve(result);
} else if (Date.now() - now >= timeout * 1000) {
clearInterval(interval);
reject(result);
}
running = false;
}, step);
});
}
Example
example();
async function example() {
let foo = 'bar';
setTimeout(() => foo = null, 2000);
console.log(`foo === "${foo}"`);
await waitFor(() => foo === null);
console.log('2 seconds have elapsed.');
console.log(`foo === ${foo}`);
}
function waitFor(condition, step = 250, timeout = Infinity) {
return new Promise((resolve, reject) => {
const now = Date.now();
let running = false;
const interval = setInterval(async () => {
if (running) return;
running = true;
const result = await condition();
if (result) {
clearInterval(interval);
resolve(result);
} else if (Date.now() - now >= timeout * 1000) {
clearInterval(interval);
reject(result);
}
running = false;
}, step);
});
}