I have a problem with pausing asynchronous JS loop from execution for some period of time.
I need it to pause, for example every 45th iteration so I came up with a simple code to help me determine when it happens:
if (i > 1)
{
var numba = i / 45;
if (isInteger(numba))
{
document.write('TIMEOUT START <br>');
setTimeout(function(){document.write('TIMEOUT END<br>');}, 540000);
}
}
function isInteger(x)
{
return x % 1 === 0;
}
And my async loop code is following:
var num = 150;
var asyncLoop = function(o)
{
var i=0;
var loop = function(){
i++;
if(i==o.length){o.callback(); return;}
o.functionToLoop(loop, i);
}
loop();//init
}
asyncLoop({
length : num,
functionToLoop : function(loop, i)
{
if (i==0){}
loop();
},
callback : function(){
}
});
First I tried to place this code for pausing loop inside the loop function however that didn't work and now I partly understand why. However every other way I tried failed also.
Does anyone know how to achieve what I'm trying to do?
Thanks in advance
Here's a snippet I whipped up.
It will call functionToLoop loops times, pausing for pauseTimeout milliseconds each pauseAt runs, then calls callback at the end.
function loopWithPause(functionToLoop, callback, loops, pauseAt, pauseTimeout) {
var n = 0;
function start() {
if(n + pauseAt > loops) pauseAt = loops- n;
for(var i = 0; i < pauseAt; i++) {
functionToLoop(n + i);
}
n += pauseAt;
if(n == loops) callback();
else setTimeout(start, pauseTimeout);
}
start();
}
Example:
loopWithPause(function(i){console.log(i)}, function(){console.log('done!')},10, 2, 2000);
Outputs:
0
1
(2 second pause)
2
3
(2 second pause)
4
5
(2 second pause)
6
7
(2 second pause)
8
9
done!
For your scenario the call will probably be:
loopWithPause(functionToLoop, callback, 150, 45, 540000);
This does what you're asking. Perhaps you can adapt it to your need. Paste it into your JavaScript console and watch it run forever.
var printNumbers = function(startingAt) {
var end = startingAt + 45;
for (i = startingAt; i < end; i++)
{
console.log(i)
}
window.setTimeout(function() { printNumbers(end); }, 1000)
}
printNumbers(0)
It's almost recursive, except that the recursion happens via the event loop with the time-out.
This carries state forward via the variable, to be used next time the function runs (alternatively use a global variable or closure to contain the state between function executions). It's the only way to do something like this, because JavaScript is single-threaded and you can't 'pause' without making the whole runtime grind to a halt.
Related
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 3 years ago.
I have 2 simple code snippet about for loop involving let and var separately.
First code which has a variable declared with let
for (let i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
so it will show o/p like this
0123456789
but if I replace let with var like this
for (var i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
it will print 10 for ten times.
I know it is something related to function level scope and block-level scope, but want to clearly understand step by step process of execution.
Thanks in advance.
The reason why you are only printing 9 is that the callback function is executed after the loop is done. Which means that i is 9.
You can:
If you are trying to print 1 - 10 after 1 sec, you can loop in the callback function. Like:
setTimeout(function() {
for (var i = 0; i < 10; i++) { //Put the loop inside the setTimeout db function.
console.log(i);
}
}, 1000);
If you are trying to print every one sec, you can pass the i as the 3rd parameter on setTimeout
for (var i = 0; i < 10; i++) {
setTimeout(function(o) { //Receive it on variale o
console.log(o);
}, 1000 * i, i); //Pass the i as third parameter
}
Doc: setTimeout
This question already has answers here:
Is there a better way of writing v = (v == 0 ? 1 : 0); [closed]
(31 answers)
Closed 5 years ago.
I want a variable's value regularly changing between 0 and 1. If I have a variable whose value is 0 (counter = 0), how can I increase it by 1 (counter = 1) after a few seconds, then decrease it back to 0 ( counter = 0) after another few seconds? An endless loop basically is what I want.
I'm assuming this will require setTimeout or setInterval, but I've absolutely no idea how I'd go about this. I'm very unfamiliar with the syntax; I'm very much a newbie. Does anyone have any pointers?
Thanks!
You can create an endless, timed loop by having a function that calls itself at the end via setTimeout. See below.
var count = 0;
function flip() {
count = Number(!count);
console.log(count);
setTimeout(flip, 1000);
}
flip();
A more generic approach:
// possible addition: allow user to stop the timer
const rotate = (time, vals) => {
// TODO: handle incorrect vals (non-empty array) or time (positive number)
let idx = 0;
setInterval(() => idx = (idx + 1) % vals.length, time);
return {
get val() {return vals[idx];}
}
}
const toggle = rotate(1000, [0, 1])
toggle.val //=> depends on when you call it, changes every 1000 ms
// but always either 0 or 1.
One advantage of this is that it doesn't keep the value in global scope where someone else can mess with it, but encapsulates it in a closure.
It's more generic because you can easily change the time between updates and you can choose whatever you want for values (for example, rotate(5000, ['foo', 'bar', 'baz').)
var counter = 0;
var changeCounter = function () {
counter = counter === 0 ? 1 : 0;
console.log('counter', counter);
setTimeout(changeCounter, 1000);
}
changeCounter();
This sounds like homework but try this:
var value = 0;
setInterval(
function() {
value = value===0 ? 1 : 0;
console.log('value =', value);
},
1000
);
setInterval will call the function over and over again without needing to call setTimeout over and over again.
setInterval is what you want, as documented in W3C, you should pass a function and a time interval in milliseconds on how often to execute the code.
var counter = 0;
setInterval(function(){
counter = 1 - counter;
//Do what you want with the result...
//alert(counter);
}, 1000);
https://codepen.io/paulodiogo/pen/xPPOKa?editors=1010
Not using global variable...
https://codepen.io/paulodiogo/pen/KyyMXZ
I wrote a simple code/userscript to notify me about changes on a webiste:
function notifier(){
setTimeout(function () {
location.reload(true);
},60000)
}
function notiCounter() {
console.log("Counting notifications");
var noti = document.getElementsByClassName("notification");
for(var i = 0; i < 2; i++) {
if(noti[i].innerHTML != undefined) {
console.log(noti[i].innerHTML);
notifications++;
console.log("Notifications: " + notifications);
}
}
}
function notification(){
setTimeout(function () {
notiCounter();
if(notifications > 0){
document.title = "(" + notifications + ") new notifcations";
sound.play();
}
notifier();
},50)
}
notification();
The problem is, that the actual final number of noti[i] is unknown/dynamic and changes all the time, so if i < 2 is replaced with a higher number the for loop ends up in an infinite loop - and if I pick it too low (2 for example), data will gets lost if the actual number is above 2.
Any idea about that problem? Maybe it's really obvious and I can't see, as it is really late haha.
Rather than checking for i < 2, check for i < noti.length. Or you can iterate through using a for(var i in noti) type loop. Or better yet, if you just want the number of notifications directly, just use the value in noti.length
I'm new to learning javascript and getting strange behaviour that I don't understand
So this is printing exactly what I expect. 0,1,2,3,4
var numberOfPlayers = 5;
for ( i = 0; i < numberOfPlayers; i++ ) {
alert(i);
}
But when I try the following code where I want to run a function every 1 seconds I get, 5,5,5,5,5
var numberOfPlayers = 5;
for ( i = 0; i < numberOfPlayers; i++ ) {
setInterval(function () {
alert(i);
}, 1000);
}
Can anyone explain to me what is actually happening here. I would expect the same numbers in both parts of code.
In the first instance, you alert the value of i as it goes around the loop.
In the second, you alert the value of i after one second. By the time that second has passed, the loop has finished going around five times, so the value of i at the time is the last value of i.
The I is not bound in the inner function inside the loop -- to something like this to bind it in each iteration of the loop
var numberOfPlayers = 5;
for ( i = 0; i < numberOfPlayers; i++ ) {
(function(i) {
setInterval(function () {
alert(i);
}, 1000);
})(i);
}
You should be getting 5 5 5 5 5. The reason is that your for loop very quickly runs and binds the function to run 5 times. It iterates through itself until i is equal to 5. By the time the second is up and the function is scheduled to run, i is equal to 5. It will then repeat every 1 second 5 times.
As #Quentin explained in his answer, it's an issue of timing and because of the closure inside of setInterval(). There's a good explanation here: Javascript infamous Loop issue?.
For a case like this I would probably use the code #Soren suggested. Another option would be to use a separate function:
var numberOfPlayers = 5;
for ( i = 0; i < numberOfPlayers; i++ ) {
intervalAlert(i);
}
function intervalAlert(i) {
setInterval(function () {
alert(i);
}, 1000);
}
See also http://blog.mixu.net/2011/02/03/javascript-node-js-and-for-loops/
I'm getting confused with what's happening here. The quiz works fine the first time. After the first play, though, I get all sorts of problems. I want to click the same button,"#start2", to start and also restart the quiz, ie clear the timer, put all variables back to 0 etc, and display the first question. As if the page had been refreshed, basically.
Instead, I'm getting faster ticking, the timer is incrementing on correct guess and so on. Horrible.
I've used modulo to measure how many times the "#start2" div is clicked. On first click, start timer. On second click - I want to reset the timer. Third click - start timer, and so on.
Any help is massively appreciated.
var n = 0;
var x = 0;
var p = 0;
var incTime;
function a(n) {
var x,y,z;
x = Math.floor((Math.random() * 3))
if(x == 0){y = 1; z = 2}else if(x == 1){y = 0; z = 2}else{y = 0; z = 1}
$("#question_holder2").text(questions[n].q);
$(".answer_holder2").eq(x).text(questions[n].a).data('answer', 'a');
$(".answer_holder2").eq(y).text(questions[n].b).data('answer', 'b');
$(".answer_holder2").eq(z).text(questions[n].c).data('answer', 'c');
}
$(document).ready(function() {
//timing element
function startTimer(x){
$("#start2").text(x);
}
$("#start2").click(function(){
var setTimer;
p++;
//if it's been clicked before
if(p%2 === 0){
clearInterval(setTimer);
$("#start2").text("Start");
n = 0;
x = 0;
a(n);
alert("okay");
}else if(p%2 !== 0){
//never been clicked before
a(n);
setTimer = setInterval(function(){startTimer(x=x+1)}, 1000);
$('.answer_holder2').click(function() {
//correct answer given
if ($(this).data('answer') === 'a') {
n++;
if (n < questions.length) {
a(n);
} else {
alert("End of quiz!");
clearInterval(setTimer);
$("#start2").text("You took " + x + " seconds, you answered " + n + " questions correctly, with - incorrect answers given.");
x = 0;
n = 0;
a(n);
}
}else{
//incorrect answer given
$(this).fadeTo(1000,0.4);
var timeString = $("#start2").text();
var incTime = (timeString * 1) + 5;
$("#start2").text(incTime);
startTimer(incTime);
x = incTime;
};
});
};
});
});
You have this:
$("#start2").click(function(){
var setTimer;
p++;
//if it's been clicked before
if(p%2 === 0){
clearInterval(setTimer);
//....
In this case, when you set to the clearInterval line, setTimer will always be 0, and not the id of a running timer. So this is not actually stopping any timer. If you don't stop the timer it will continue to run. So the function here:
setTimer = setInterval(function(){startTimer(x=x+1)}, 1000);
Will continue to run. So the next time you create a timer, you now have two timers updating x and it'll look like it's running faster.
Try this:
$(document).ready(function() {
var setTimer;
$("#start2").click(function(){
// the rest of your click handler code...
});
//timing element
function startTimer(x){
$("#start2").text(x);
}
}
Your setTimer variable needs to exist in a scope outside of your click handler. As you had it you were declaring a new variable every time so when you try and clear the timer, you are not actually clearing the timer.
Also: freakish's point about how you are reattaching the click handler is also a problem. You need to fix that too.
The answer is that bad things happen because of this:
$("#start2").click(function(){
// some code...
$('.answer_holder2').click(function() {
// some code...
});
});
When you click on #start2 new handler is attached to .answer_holder2. So after for example 3 clicks, .answer_holder2 has 3 handlers attached to it and when you click on it all 3 fire.
You're code is a bit complicated and I'm not going to give you a solution how to fix that. But I can give you a hint. Put inner .click outside of outer .click. You will have to change some code probably, but that has to be done.
EDIT What you could try ( as a fast fix, but not necessarly good ) is adding this:
$('.answer_holder2').off( "click" ).click(function() {
Additonally have a look at Matt's answer.