I have a very strange behavior that I do not understand why it occurs
The console.log at the end is printed once at the end of the script run and then again for each event that occurs, and the tempOutput array appears three times, each time with different values.
var tempOutput = []
if (limited) {
var selectseries = mvc.Components.getInstance('selectseries');
selectseries.on("change", function(event) {
let vfx = setInterval(
function() {
dropSelect.classList.add('pulse-on');
setTimeout(
function() {
dropSelect.classList.remove('pulse-on')
}, 1200
)
}, 2400);
defaultTokenModel.on("change:" + dropDownTyp.tokenName, function(e) {
if (vfx) {
clearInterval(vfx);
document.querySelector('#drop_arrow').style.background = ''
}
});
} else {
dropSelect.setAttribute('value', '<Select ' + label + '>')
dropSelect.classList.add('disable')
}
})
}
console.log("how much?")
console.log(tempOutput)
I would expect to see the array printed once, and once "how much?"
How can I stop a setTimeout function before starting from the onWrite event on a "Firebase Cloud Function"? I try with setTimeout, but the clearTimeout do not stop the setTimeout.
P.S.: I've already raised the script timeout from the Firebase panel from 60 seconds (default) to 360 seconds.
var timeOutOnline = {};
exports.online = functions.database.ref('/server/{serverId}/online/time').onWrite(event => {
const serverId = event.params.serverId;
var time = event.data.val();
var lastDateOnline = new Date( time * 1000);
var dateString = lastDateOnline.toGMTString();
clearTimeout(timeOutOnline[serverId]);
refGet = db.ref('/server/'+serverId+'/online/');
refGet.once('value').then(function(snapshot) {
var onlineSnap = snapshot.val();
if (onlineSnap && onlineSnap.alarm == true) {
sendMail(serverId,false, 'not responding' , 'Server '+ serverId + ' not responding from '+dateString);
setAlarmStatus(serverId,false);
} else {
timeOutOnline[serverId] = setTimeout(function() {
sendMail(serverId,true, 'not responding' , 'Server '+ serverId + ' not responding from '+dateString);
setAlarmStatus(serverId,true);
}, 21000);
}
});
return true;
});
UPDATE:
Now I use promise, but clearTimeout still not working, not clearing setTimeout function. What am I doing wrong?
var timeOutOnline = {};
exports.online = functions.database.ref('/server/{serverId}/online/time').onWrite(event => {
const serverId = event.params.serverId;
var time = event.data.val();
var lastDateOnline = new Date( time * 1000);
var dateString = lastDateOnline.toGMTString();
console.log(v);
if(!timeOutOnline[serverId]) {
timeOutOnline[serverId] = [];
} else {
timeOutOnline[serverId].length;
for (var i = 0; i < timeOutOnline[serverId].length; i++) {
if (timeOutOnline[serverId][i]) {
timeOutOnline[serverId][i].cancel();
timeOutOnline[serverId][i] = null;
}
}
}
timeOutOnline[serverId] = timeOutOnline[serverId].filter(n => n);
refGet = db.ref('/server/'+serverId+'/online/');
refGet.once('value').then(function(snapshot) {
var onlineSnap = snapshot.val();
if (onlineSnap && onlineSnap.alarm == true) {
sendMail(serverId,false, 'not responding' , 'Server '+ serverId + ' not responding from '+dateString);
setAlarmStatus(serverId,false);
} else {
timeOutOnline[serverId].push(waitForServer(210000));
var index = timeOutOnline[serverId].length - 1;
return timeOutOnline[serverId][index].promise.then(function(i) {
console.log('Server '+ serverId + ' not responding from '+dateString);
sendMail(serverId,true, 'not responding' , 'Server '+ serverId + ' not responding from '+dateString);
setAlarmStatus(serverId,true);
});
}
});
return true;
});
function waitForServer(ms) {
var timeout, promise;
promise = new Promise(function(resolve, reject) {
timeout = setTimeout(function() {
resolve('timeout done');
}, ms);
});
return {
promise:promise,
cancel:function(){
console.log('cancel timeout: '+timeout);
clearTimeout(timeout);
}
};
}
There's a lot of things wrong in this function.
First of all, it's not clear to me why you want to use setTimeout() in this function. In fact, there are almost no valid use cases for setTimeout() with Cloud Functions. Functions are supposed to execute as fast as possible, and setTimeout only really just incurs extra cost to your processing. Cloud Functions does not enable you to run "background work" that survives past the invocation of the function - that's just not how it works.
Second of all, you're performing async work here, but you're not returning a promise to indicate when that work completes. If you don't return a promise that's resolved when your work completes, your function is highly likely to exhibit strange problems, including work not completing as you'd expect.
I know that most probably such question has been requested several times but I have a need to show a popup or message or whatelse when a javascript function is triggered and hide it at the end.
See this simple js fiddle
That's the HTML code:
<div id='message'>Default message</div>
<input type='button' onclick='Run();' value='start'>
the div 'message' has to contain a simple text like "running" or "please wait" or ...
That's the JS function that took (delay) 3 seconds:
function Run() {
var delay = 3000; //-- 3 seconds
$( '#message' ).text('Please wait ' + delay + ' seconds...');
var start = new Date().getTime();
while (true) {
current = new Date().getTime();
if ( (start + delay) < current) {
break;
}
}
$( '#message' ).text('Done');
}
The expected behaviour is that the '#message' div contains "Please wait 3 seconds..." before to enter in the loop and "Done" string only at the end.
But that's not.
Can anyone explain me (most probably "again") why or suggest a link where to find an answer?
The JS event loop is too busy running while (true) {} to handle a DOM repaint.
Use setInterval, setTimeout, or requestAnimationFrame to trigger the next test of the time instead of a loop.
function Run() {
var delay = 3000; //-- 3 seconds
$( '#message' ).text('Please wait ' + delay + ' seconds...');
var start = new Date().getTime();
setTimeout(whenDelayIsOver, 50);
function whenDelayIsOver() {
if ( (start + delay) < current) {
$( '#message' ).text('Done');
} else {
setTimeout(whenDelayIsOver, 50);
}
}
}
… or just use setTimeout in the first place.
function Run() {
var delay = 3000; //-- 3 seconds
$( '#message' ).text('Please wait ' + delay + ' seconds...');
setTimeout(whenDelayIsOver, delay);
function whenDelayIsOver() {
$( '#message' ).text('Done');
}
}
Try this http://jsfiddle.net/aamir/23ZFY/11/
function Run() {
var secs = 3;
$('#message').text('Please wait '+ secs +' seconds...');
var timer = setInterval(function () {
if (secs == 1) {
clearTimeout(timer);
$('#message').text('Done');
return;
}
secs--;
$('#message').text('Please wait ' + secs + ' seconds...');
}, 1000);
}
The browser's display is only updated when the function completely finishes running.
You can run the second lot of code asynchronously by using setTimeout.
function Run() {
$('#message').text('Please wait 3 seconds...');
setTimeout(
function () {
var start = new Date().getTime();
while (true) {
current = new Date().getTime();
if ((start + 3000) < current) {
break;
}
}
$('#message').text('Done');
},0);
}
You have a very tight loop (while(true)...) which doesn't allow the UI to update at all. What you can do instead is this:
function Run() {
var delay = 3000; //-- 3 seconds
$('#message').text('Please wait ' + (delay/1000) + ' seconds...');
setTimeout(function () {
$('#message').text('Done');
}, delay);
}
Basically, set the "wait message" initially and use the setTimeout function to update the message again after 3 seconds.
Updated fiddle.
The glowing CSS effect is:
//Public Variables.
var clear_interval;
var stop_set_time_out;
function record_css_effect() {
clear_interval = setInterval(
function() {
rec_block.css('background-color', "red");
stop_set_time_out = setTimeout(function() {
rec_block.css('background-color', "green");
}, 500)
}, 1000);
};
And in another function, I call:
function stop_record() {
alert("Stop record.");
clearTimeout(stop_set_time_out);
clearInterval(clear_interval);
}
The glowing only stops first time.
The second time, I didn't call record_css_effect() function yet the glowing effect happened automatically...
which would mean that the clearTimeout and clearInterval don't work...
Why is that, and How can I achieve it?
UPDATE:
Actually, I use clearInterval( clear_interval ); in many places.
As the user want to take record,they press on a button, and pop_record_window() is then called.
function pop_record_window()
{
$('#start_and_stop_rec').click
(
function(){ record_voice(); }
)
}
function record_voice()
{
record_css_effect();
REC= $("#start_and_stop_rec");
if(REC.prop("value")=="record")
{
alert("Start to record");
alert( dir_path + User_Editime + "/rec"+"/" + "P" + current_page + "_" + records_pages_arr[current_page].get_obj_num() +".mp3");
current_rec_path= dir_path + User_Editime + "/rec"+"/" + "P" + current_page + "_" + records_pages_arr[current_page].get_obj_num() +".mp3";
cur_record_file= new Media(current_rec_path,onSuccess, onError);
cur_record_file.startRecord();
$('#stop_rec').bind("click", function(){
clearTimeout( stop_set_time_out );
clearInterval( clear_interval );
});
REC.prop("value","stop");
}
else if(REC.prop("value") == "stop")
{
stop_record();
cur_record_file.stopRecord();
clearInterval( clear_interval );
//make visibility hidden!
REC.prop("value","record");
}
};
But since the second time, the user didn't press on the button: start_and_stop_rec, the glowing effect fires. However, the code within
if(REC.prop("value")=="record") condition doesn't execute.
If you call record_css_effect() multiple times multiple intervals might start but only the last interval-id will be stored in clear_interval. By ensuring only 1 interval is running at a time you can prevent this from happening.
//Public Variables.
var clear_interval;
var stop_set_time_out;
function record_css_effect() {
if (clear_interval !== null) // if a timer is already returning don't start another
return;
clear_interval = setInterval(function () {
rec_block.css('background-color', 'red');
stop_set_time_out = setTimeout(function () {
rec_block.css('background-color', 'green');
}, 500)
}, 1000);
};
function stop_record() {
alert("Stop record.");
clearTimeout(stop_set_time_out);
clearInterval(clear_interval);
stop_set_time_out = clear_interval = null;
}
You can also make your code a bit simpler (by removing the setTimeout) to make it easier to debug, like so:
//Public Variables.
var clear_interval, isRed = false;
function record_css_effect() {
if (clear_interval !== null) // if a timer is already returning don't start another
return;
clear_interval = setInterval(function () {
if (isRed) {
rec_block.css('background-color', 'red');
isRed = false;
} else {
rec_block.css('background-color', 'green');
isRed = true;
}
}, 500);
};
function stop_record() {
alert("Stop record.");
clearInterval(clear_interval);
clear_interval = null;
}?
I'm trying to build a loading indicator with a image sprite and I came up with this function
function setBgPosition() {
var c = 0;
var numbers = [0, -120, -240, -360, -480, -600, -720];
function run() {
Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
if (c<numbers.length)
{
setTimeout(run, 200);
}else
{
setBgPosition();
}
}
setTimeout(run, 200);
}
so the out put is looks like this
http://jsfiddle.net/TTkre/
I had to use setBgPosition(); inside else to keep this running in a loop so now my problem is how to stop this loop once I want [load finished]?
setTimeout returns a timer handle, which you can use to stop the timeout with clearTimeout.
So for instance:
function setBgPosition() {
var c = 0,
timer = 0;
var numbers = [0, -120, -240, -360, -480, -600, -720];
function run() {
Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
if (c >= numbers.length) {
c = 0;
}
timer = setTimeout(run, 200);
}
timer = setTimeout(run, 200);
return stop;
function stop() {
if (timer) {
clearTimeout(timer);
timer = 0;
}
}
So you'd use that as:
var stop = setBgPosition();
// ...later, when you're ready to stop...
stop();
Note that rather than having setBgPosition call itself again, I've just had it set c back to 0. Otherwise, this wouldn't work. Also note that I've used 0 as a handle value for when the timeout isn't pending; 0 isn't a valid return value from setTimeout so it makes a handy flag.
This is also one of the (few) places I think you'd be better off with setInterval rather than setTimeout. setInterval repeats. So:
function setBgPosition() {
var c = 0;
var numbers = [0, -120, -240, -360, -480, -600, -720];
function run() {
Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
if (c >= numbers.length) {
c = 0;
}
}
return setInterval(run, 200);
}
Used like this:
var timer = setBgPosition();
// ...later, when you're ready to stop...
clearInterval(timer);
All of the above notwithstanding, I'd want to find a way to make setBgPosition stop things itself, by detecting that some completion condition has been satisfied.
I know this is an old question, I'd like to post my approach anyway. This way you don't have to handle the 0 trick that T. J. Crowder expained.
var keepGoing = true;
function myLoop() {
// ... Do something ...
if(keepGoing) {
setTimeout(myLoop, 1000);
}
}
function startLoop() {
keepGoing = true;
myLoop();
}
function stopLoop() {
keepGoing = false;
}
SIMPLIEST WAY TO HANDLE TIMEOUT LOOP
function myFunc (terminator = false) {
if(terminator) {
clearTimeout(timeOutVar);
} else {
// do something
timeOutVar = setTimeout(function(){myFunc();}, 1000);
}
}
myFunc(true); // -> start loop
myFunc(false); // -> end loop
You need to use a variable to track "doneness" and then test it on every iteration of the loop. If done == true then return.
var done = false;
function setBgPosition() {
if ( done ) return;
var c = 0;
var numbers = [0, -120, -240, -360, -480, -600, -720];
function run() {
if ( done ) return;
Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
if (c<numbers.length)
{
setTimeout(run, 200);
}else
{
setBgPosition();
}
}
setTimeout(run, 200);
}
setBgPosition(); // start the loop
setTimeout( function(){ done = true; }, 5000 ); // external event to stop loop
var myVar = null;
if(myVar)
clearTimeout(myVar);
myVar = setTimeout(function(){ alert("Hello"); }, 3000);
Try something like this in case you want to stop the loop from inside the function:
let timer = setInterval(function(){
// Have some code to do something
if(/*someStopCondition*/){
clearInterval(timer)
}
},1000);
You can also wrap this inside a another function, just make sure you have a timer variable and use clearInterval(theTimerVariable) to stop the loop
As this is tagged with the extjs tag it may be worth looking at the extjs method: http://docs.sencha.com/extjs/6.2.0/classic/Ext.Function.html#method-interval
This works much like setInterval, but also takes care of the scope, and allows arguments to be passed too:
function setBgPosition() {
var c = 0;
var numbers = [0, -120, -240, -360, -480, -600, -720];
function run() {
Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
if (c<numbers.length){
c=0;
}
}
return Ext.Function.interval(run,200);
}
var bgPositionTimer = setBgPosition();
when you want to stop you can use clearInterval to stop it
clearInterval(bgPositionTimer);
An example use case would be:
Ext.Ajax.request({
url: 'example.json',
success: function(response, opts) {
clearInterval(bgPositionTimer);
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
clearInterval(bgPositionTimer);
}
});
I am not sure, but might be what you want:
var c = 0;
function setBgPosition()
{
var numbers = [0, -120, -240, -360, -480, -600, -720];
function run()
{
Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
if (c<=numbers.length)
{
setTimeout(run, 200);
}
else
{
Ext.get('common-spinner').setStyle('background-position', numbers[0] + 'px 0px');
}
}
setTimeout(run, 200);
}
setBgPosition();
In the top answer, I think the if (timer) statement has been mistakenly placed within the stop() function call. It should instead be placed within the run() function call like if (timer) timer = setTimeout(run, 200). This prevents future setTimeout statements from being run right after stop() is called.
EDIT 2: The top answer is CORRECT for synchronous function calls. If you want to make async function calls, then use mine instead.
Given below is an example with what I think is the correct way (feel to correct me if I am wrong since I haven't yet tested this):
const runSetTimeoutsAtIntervals = () => {
const timeout = 1000 // setTimeout interval
let runFutureSetTimeouts // Flag that is set based on which cycle continues or ends
const runTimeout = async() => {
await asyncCall() // Now even if stopRunSetTimeoutsAtIntervals() is called while this is running, the cycle will stop
if (runFutureSetTimeouts) runFutureSetTimeouts = setTimeout(runTimeout, timeout)
}
const stopRunSetTimeoutsAtIntervals = () => {
clearTimeout(runFutureSetTimeouts)
runFutureSetTimeouts = false
}
runFutureSetTimeouts = setTimeout(runTimeout, timeout) // Set flag to true and start the cycle
return stopRunSetTimeoutsAtIntervals
}
// You would use the above function like follows.
const stopRunSetTimeoutsAtIntervals = runSetTimeoutsAtIntervals() // Start cycle
stopRunSetTimeoutsAtIntervals() // Stop cycle
EDIT 1: This has been tested and works as expected.
When the task is completed and you can display the task (image in your case), on the next refresh don't send the javascript. If your server is using PHP.
<?php if (!$taskCompleted) { ?>
<script language="javascript">
setTimeout(function(){
window.location.reload(1);
}, 5000);
</script>
<?php } ?>