I'm trying to iterate over a string array with a delay of a few milliseconds every step of iteration. Something like below -
var l = ['a', 'b', 'c'];
var delay = 5000;
for(var i = 0;i < l.lenght;i++) {
document.querySelectorAll("a[title='" + l[i] + "']")[0].parentNode.children[0].click();
delay = 5000 + Math.floor(Math.random() * 5000) + 1;
**<WAIT for 'delay' number of milliseconds**
}
I've been able to convert the code to below using setTimeout() method -
var i = 0;
var interval = setInterval(function() {
if (i < l.length) {
document.querySelectorAll("a[title='" + l[i] + "']")[0].parentNode.children[0].click();
i++;
}
else {
clearInterval(interval);
}
//delay = 5000 + Math.floor(Math.random() * 5000) + 1); **NOT SURE where to change the delay variable**
}, delay);
But the delay variable essentially becomes a constant once setTimeout kicks off. How to change the delay variable in each iteration?
You can make a recursive timer function for this:
Try the following :
function displayValue(){
let arr = ['a', 'b', 'c'];
let delay = 1000;
let i = 0;
function timerFunction(i){
if(i === arr.length)
return;
setTimeout(()=>{
console.log(arr[i]);
i++;
timerFunction(i);
}, delay);
delay = delay + 1000 + Math.floor(Math.random() * 4000);
}
timerFunction(i);
}
displayValue();
Could you try replacing that delay variable with a function such as this?
var i = 0;
var interval = setInterval(
function() {
if (i < l.length) {
document.querySelectorAll("a[title='" + l[i] + "']")[0].parentNode.children[0].click();
i++;
}
else {
clearInterval(interval);
}
},
function() {
return 5000 + Math.floor(Math.random() * 5000) + 1;
}
);
setInterval, which you have used in your example, initializes a callback launching every (circa) N ms, where N is fixed. You have to clear it later on with clearInterval.
setTimeout on the other hand means - invoke my callback after ~N time. You could then call another setTimeout inside the callback, with a different N.
as an example:
function callback() {
/*
your logic here
*/
delay = 5000 + Math.floor(Math.random() * 5000) + 1);
setTimeout(callback, delay); // for your "clearInterval" case - just don't invoke this
}
setTimeout(callback, initialDelay);
This thread appears the closest I found to the fundamental question of how to iterate through an array at a random time interval, which isn't as easy as one would think.
Although arguably a little general for the specific question asked, the currently accepted answer looks the closest match to the fundamental question. The code below is a minor modification which looks to provide a random delay on the first pass and logs each random delay after the logging each array value.
function displayValue(){
let arr = ['a', 'b', 'c','d', 'e'];
let delay = Math.floor(Math.random()*10000);
let i = 0;
function timerFunction(i){
if(i === arr.length)
return;
setTimeout(()=>{
console.log(arr[i]);
console.log(`delay was ${Math.floor(delay/1000)} seconds`);
i++;
timerFunction(i);
}, delay);
delay = Math.floor(Math.random()*10000);
}
timerFunction(i);
}
displayValue();
The value of the above modification probably depends on the context.
Interestingly, applying the introduction to forEach from bootcamp provides an alternate solution which is probably closer related to the OP!
var colors = ["red", "green", "blue", "yellow"];
function printArr(x){
var random = Math.round(Math.random()*60000);
setTimeout(() => {
console.log(x);
console.log(`Delay was ${Math.floor(random/1000)} seconds`)
}, random);
};
colors.forEach(printArr);
Related
I've been bashing my head against this wall I am completely new to JavaScript coming from c#
and I am completely baffled for my class I have to smooth out a simple code we made to count down from zero by making it into a loop and for the life of me I just cant get it to work
var i = 10;
var timeout = 10000;
var x = 10
if (i == 5) {
alert("help me")
}
while (i > 0) {
//10
setTimeout(() => {
document.getElementById("counter").innerHTML = i;
i = i - 1;
}, timeout);
timeout = timeout - 1000;
}
Asynchrony in JavaScript is a rather involved subject.
Traditional loops (for, while, do..while, for..of) are synchronous, and so cannot help you reach your goal here.
To do what you want, you can use indirect recursion like so:
const countdown = (from = 10, to = 0, interval = 1000, cb = console.log) => {
if(from < 0) return
cb(from)
setTimeout(() =>
countdown(--from), interval)
}
countdown()
There is also a more modern approach that enables the use of syntax that looks a bit more familiar. This approach uses for await... of, the syntax for which does not appear to be supported by StackOverflow's transpiler:
const delay = (interval) => new Promise((resolve) =>
setTimeout(resolve, interval))
async function* countdown(from = 10, to = 0, interval = 1000) {
for(;from >= 0; from--) {
yield from
await delay(interval)
}
}
for await(let count of countdown()) {
console.log(count)
}
setInterval is what you're looking for to execute a function every certain amount of time:
let i = 10;
let interval = setInterval(function() {
document.getElementById("counter").innerHTML = i;
i--;
if(i < 0) clearInterval(interval);//Clear the interval when complete
}, 1000);//Every 1000 ms = every second
The code below will countdown to zero.
var i = 10;
while (i > 0){
i--;
console.log(i);
}
I've encountered a problem that's driving me crazy for like 10 days now... Basically i have a function that fire (the handleText) and I want to wait the end of that function before running a second one (the handleBackground).
I've tried deferred and promises but I think I don't understand them well because I can't get it to work the way I want.
function handleText(){
//BLAST INIT
var blastedwords = $('.baselineHeader').blast({
delimiter: 'word',
});
//SHUFFLE ORDER IN ARRAY
blastedwords = shuffleAds( blastedwords);
function shuffleAds(arr){
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
}
//ADD CLASS TO SPAN CREATED WITH BLAST WITH A RANDOM DELAY
blastedwords.each(function(index) {
var min = 45, max = 100;
var delay = Math.floor(Math.random() * (max - min) + min);
var that = $(this);
var t = setTimeout(function() {
$(that).addClass("test");
}, delay * index);
});
}
function handleBackground(){
$('.baselineHeader').addClass('processed');
}
handleText();
handleBackground();
Right now, handleText start, and handleBackground (my second function that I want to run after the first one is finished) fire at the same time and doesn't wait for handleText to finish.
I want handleText to run and wait for the each loop to give class to every span created with blast.js before running handleBackground.
Can someone help me with this ?
Have a great day folks :)
I'd recommend setting up a global variable totalTime which you can use to add up the inidivual delays. That way you can use another setTimeout to call the function handleBackground() after totalTime has passed.
var totalTime = 0;
blastedwords.each(function(index) {
var min = 45,
max = 100;
var delay = Math.floor(Math.random() * (max - min) + min) * index;
totalTime += delay;
var that = $(this);
var t = setTimeout(function() {
$(that).addClass("test");
}, delay);
});
setTimeout(handleBackground, totalTime);
Define delay outside of your function and each iteration increase the delay so that the next one is a random amout of time after the last one.
var delay = 0;
blastedwords.each(function(index) {
var min = 45, max = 100;
delay += Math.floor(Math.random() * (max - min) + min);
var that = $(this);
var t = setTimeout(function() {
$(that).addClass("test");
}, delay * index);
});
I was trying to implement a function, which is supposed to post measurement A every 5 sec for 10 times, and then post measurement B every 5 sec for a random amounts of time. And I want repeat this function forever as I was trying to implement a fake agent.
So I had the code:
let intervalId = null, repeat = 0;
while (true) {
intervalId = setInterval(() => {
if (repeat < 5) {
// post measurement A
repeat += 1;
}
else {
clearInterval(intervalId)
}
}, 1000);
repeat = 0;
intervalId = setInterval(() => {
if (repeat < Math.floor(Math.random() * 11)) {
// post measurement B
repeat += 1;
}
else {
clearInterval(intervalId)
}
}, 1000);
}
The two setInterval() function didn't happen consecutively as I expected, instead they happened at the same time. And the while (true) loop seems not behave as expected either. I'm just wondering is there any way to get around with this problem? Thanks.
You can create two function, one is doA() and one is doB().
Start with doA(), count the number of time //do A is called, when it reached 10, clearInterval and call doB().
In doB(), set the min and max time it should be called, then when it reached randTime clearInterval and doA()
function doA() {
let count = 0;
const a = setInterval(() => {
//do A
console.log('do A');
count += 1;
if (count === 10) {
clearInterval(a);
doB();
}
}, 5000/10);
}
function doB() {
// set your min and max for B
const minTime = 1;
const maxTime = 10;
const randTime = Math.floor(Math.random() * (maxTime - minTime + 1)) + minTime;
let count = 0;
const b = setInterval(() => {
// do B
console.log(randTime);
console.log('do B');
count += 1;
if (count === randTime) {
clearInterval(b);
doA();
}
}, 5000 / randTime);
}
doA();
Working on top of your code, first thing first, remove infinite while loop. It will run endlessly in synchronous fashion while setInterval is asynchronous. repeat value will be far ahead before you do repeat += 1.
Second, break them down in function so they have their own closure for intervalId and repeat value.
function intervalA () {
let intervalId = null
let repeat = 0
intervalId = setInterval(() => {
if (repeat < 5) {
console.log(new Date(), 'A')
// post measurement A
repeat += 1; // increment repeat in callback.
}
else {
clearInterval(intervalId); // done with interval, clear the interval
intervalB(); // and start interval B
}
}, 1000)
}
function intervalB () {
let repeat = 0
let randomEnd = Math.floor(Math.random() * 11) // calculate when it should end.
let intervalId = setInterval(() => {
if (repeat < randomEnd) {
console.log(new Date(), 'B will finish in', randomEnd, 'times')
repeat += 1
}
else {
clearInterval(intervalId) // clear the interval once done
}
}, 1000)
}
intervalA(); //start with interval A
Currently, the intervals are being set at once, synchronously, at the start of your script and during every while thereafter. It would probably be clearer if you only a single interval, with a variable that indicated which measurement to run, and change that variable every random-nth iteration:
const getRandomRepeats = () => Math.ceil(Math.random() * 11)
let repeatsRemaining = getRandomRepeats();;
let measureA = true;
setInterval(() => {
repeatsRemaining--;
if (repeatsRemaining === 0) {
repeatsRemaining = getRandomRepeats();
measureA = !measureA;
}
console.log('repeats remaining: ' + repeatsRemaining);
if (measureA) {
console.log('posting a');
} else {
console.log('posting b');
}
}, 1000);
I want that my for loop should not be executed at once, but wait for timeout after each iteration. For eg :
for(var i=0; i<10; i++) {
console.log(i);
//wait for 1000
}
I found many solutions on stack-overflow like this one :
for (var i=0;i<=10;i++) {
(function(ind) {
setTimeout(function(){console.log(ind);}, 3000);
})(i);
}
But in all the implementations, the loop waits for 3000 milli-seconds initially and then executes the whole for loop at once. Is there a way that each iteration is called after waiting for 1000 milli-seconds.
You can work that out with simple math :
for (var i=0;i<=10;i++) {
(function(ind) {
setTimeout(function(){console.log(ind);}, 1000 + (3000 * ind));
})(i);
}
1000ms : 0
4000ms : 1
7000ms : 2
10000ms : 3
13000ms : 4
...
Following the comments
It seem that your request is a bit blurry. if you want to do something after the last timeout, you can set a limit and compare the current index :
var limit = 10
for (var i=0;i<=limit;i++) {
(function(ind) {
setTimeout(function(){
console.log(ind);
if(ind === limit){
console.log('It was the last one');
}
}, 1000 + (3000 * ind));
})(i);
}
Fiddle : http://jsfiddle.net/Tn4A7/
I think I know what you want...
and it is to simply do
for (var i=0;i<=10;i++) {
(function(ind) {
setTimeout(function(){console.log(ind);}, 1000 * ind);
})(i);
}
Don't make functions within loops, instead:
(function fiveSeconds (n) {
if (n < 5) setTimeout(function () {
fiveSeconds ( n ); // Redo if n < 5 (and pass n)
}, 1000);
console.log( n++ );
} (0)); // Initialize. n is 0
the above will log ten numbers from 0 - 5 at 1 seconds interval.
Modern browsers (and IE10+)
(function fiveSeconds (n) {
console.log( n++ );
if (n <= 5) setTimeout( fiveSeconds, 1000, n ); // Redo if n <= 5 (and pass n)
} (0)); // Initialize. n is 0
why not use something like this:
var i = 0
var id = window.setInterval(function(){
if(i >= 10) {
clearInterval(id);
return;
}
console.log(i);
i++;
}, 1000)
for (var i=0;i<=10;i++) {
(function(ind) {
setTimeout(function(){console.log((ind + 1)*1000, ':', ind);}, 1000 * (ind+1) );
})(i);
}
Output:
1000 : 0
2000 : 1
3000 : 2
4000 : 3
5000 : 4
6000 : 5
7000 : 6
8000 : 7
9000 : 8
10000 : 9
11000 : 10
WORKING DEMO
This works:
function initiateTimeOut(i) {
setTimeout(function() { doStuff(i) }, 30);
}
function doStuff(i) {
console.log(i);
i++;
if (i <= 10) {
initiateTimeOut(i);
}
}
initiateTimeOut(0);
this way you will only increment i when your function executes, which i believe is what your looking for.
Example in a fiddle: http://jsfiddle.net/My7Zg/
Or, even shorter (http://jsfiddle.net/My7Zg/1/):
function customLoop(i) {
console.log(i);
i++;
if (i<=10) {setTimeout(function(){customLoop(i);},1000);}
}
customLoop(0);
Here is an es6 solution. I really don't like wrapping the setTimeout in a function, when you can simply use a block scoped variable like this:
for (let i=0; i<=10; i++) {
setTimeout(() => {console.log(i);}, 1000 * i);
}
You can approach your situation in two ways.
You can immedately schedule a whole bunch of setTimeout() calls with varying times so they will execute at the desired times in the future (other answers here illustrate how to do that).
You can execute the first iteration, schedule the next iteration and have the execution of the next iteration schedule the one after that until you've finished the desired number of iterations. This is ultimately a bit more scalable than setting a lot of setTimeout() call and gives you more branching/logic freedom because you are in control of what happens next after each iteration.
This second option using a more general purpose utility function would look like this:
// utility function to call a callback numTimes,
// separated by delay milliseconds
function runIteration(fn, numTimes, delay) {
var cnt = 0;
function next() {
// call the callback and stop iterating if it returns false
if (fn(cnt) === false) return;
++cnt;
// if not finished with desired number of iterations,
// schedule the next iteration
if (cnt < numTimes) {
setTimeout(next, delay);
}
}
// start first iteration
next();
}
So, to execute your console statement, you'd do this:
runIteration(function(i) {
console.log(i);
}, 10, 1000);
Working demo: http://jsfiddle.net/jfriend00/HqCZ3/
This could also be extended with a 2nd callback function that was called when the iteration was complete (useful in some circumstances) or it could return a promise that is resolved when the iterations are complete.
Here's what a version that returns a promise would look like: http://jsfiddle.net/jfriend00/XtJ69/
// utility function to call a callback numTimes,
// separated by delay milliseconds
function runIteration(fn, numTimes, delay) {
var d = $.Deferred();
var cnt = 0;
function end() {
d.resolve();
}
function next() {
// call the callback and stop iterating if
// it returns false
if (fn(cnt) === false) {
end();
return;
}
++cnt;
// if not finished with desired number of iterations,
// schedule the next iteration
if (cnt < numTimes) {
setTimeout(next, delay);
} else {
end();
}
}
// start first iteration
next();
return d.promise();
}
runIteration(function(i) {
log(i);
}, 10, 1000).done(function() {
log("done");
});
Another workaround is to use a generator function with setInterval:
const steps = function*() {
for (let i=0; i<10; i++) {
yield i;
}
}
const step = steps();
setInterval(function(){
console.log(step.next().value)
}, 1000);
This is a solution with a simple timeout... Maybe it does not match exactly with what you expect, but trying to make a "pause" with javascript is not a good approach in my advice. I suggest you to search an other way to do what you want. Fiddle
window.my_condition = true;
window.my_i = 0;
function interate() {
console.log(window.my_i);
// ... your code
if (window.my_condition!==false) {
window.my_i++;
setTimeout(interate,300);
}
}
interate();
most of the answers in here are completely wrong.
If you want to wait for each iteration to finish --- then you don't want to use a for loop --- simply the wrong strategy to begin with.
you need to use a counter and a counter limit otherwise it will loop endlessly.
here is the solution:
var optionLimit = 11;
var optionItem = 1;
function do_something_else() {
if (optionItem < optionLimit) {
console.log('doing stuff:' + optionItem)
optionItem++
dostuff();
} else {
console.log('no more stuff to do already reached:' + optionItem)
}
}
function dostuff(started) {
if (started) {
console.log('started doing something');
} else {
console.log('find something else to do');
}
setTimeout(function () {
do_something_else();
}, 3000);
}
dostuff('started doing something');
if you have a set of items that you need to index --- then you can use a loop to count through the number of items that need to be executed like so:
var thingstodo = [
thing1 = {
what: 'clean room',
time: 8000
},
thing2 = {
what: 'laundry',
time: 9000
},
thing3 = {
what: 'take out trash',
time: 6000
},
thing4 = {
what: 'wash dishes',
time: 10000
}
]
var optionLimit = 0;
// find how many things to do from things to do list
function get_things_todo(time) {
console.log('heres stuff i can do');
console.log('====================');
for (var i = 0; i < thingstodo.length; i++) {
val = thingstodo[i];
console.log(JSON.stringify(val.what));
optionLimit++
}
setTimeout(function () {
startdostuff(3000)
}, time);
}
var optionItem = 0;
// find the next thing to do on the list
function get_next_thing(time) {
setTimeout(function () {
console.log('================================');
console.log('let me find the next thing to do');
}, time);
setTimeout(function () {
if (optionItem < optionLimit) {
val = thingstodo[optionItem];
dostuff(3000, val);
optionItem++
} else {
console.log('=====================================================');
console.log('no more stuff to do i finished everything on the list')
}
}, time*1.5);
}
//do stuff with a 3000ms delay
function dostuff(ftime, val) {
setTimeout(function () {
console.log('================================');
console.log('im gonna ' + JSON.stringify(val.what));
console.log('will finish in: ' + JSON.stringify(val.time) + ' milliseconds');
setTimeout(function () {
console.log('========');
console.log('all done');
get_next_thing(3000);
}, val.time);
}, ftime);
}
//start doing stuff
function startdostuff(time) {
console.log('========================');
console.log('just started doing stuff');
setTimeout(function () {
get_next_thing(3000);
}, time);
}
/// get things to first
get_things_todo(3000);
My best way in work is to "forget normal loops" in this case and use this combination of "setInterval" includes "setTimeOut"s:
function iAsk(lvl){
var i=0;
var intr =setInterval(function(){ // start the loop
i++; // increment it
if(i>lvl){ // check if the end round reached.
clearInterval(intr);
return;
}
setTimeout(function(){
$(".imag").prop("src",pPng); // do first bla bla bla after 50 millisecond
},50);
setTimeout(function(){
// do another bla bla bla after 100 millisecond.
seq[i-1]=(Math.ceil(Math.random()*4)).toString();
$("#hh").after('<br>'+i + ' : rand= '+(Math.ceil(Math.random()*4)).toString()+' > '+seq[i-1]);
$("#d"+seq[i-1]).prop("src",pGif);
var d =document.getElementById('aud');
d.play();
},100);
setTimeout(function(){
// keep adding bla bla bla till you done :)
$("#d"+seq[i-1]).prop("src",pPng);
},900);
},1000); // loop waiting time must be >= 900 (biggest timeOut for inside actions)
}
PS: Understand that the real behavior of (setTimeOut): they all will start in same time "the three bla bla bla will start counting down in the same moment" so make a different timeout to arrange the execution.
PS 2: the example for timing loop, but for a reaction loops you can use events, promise async await ..
I share a simple solution to do this.
To solve this problem, you need to use closure: immediately invoke the function that will be called on each iteration with "i" as param and setTimeout inside this function. In this case, the parameter you passed will be stored in scope and could be used in the timeout callback:
for (var i=1; i<6; i++) (function(t) {
setTimeout(function() {
//do anything with t
}, t*1000)
}(i))
With this example you would see approximately what happens with the function:
for (var i=1; i<6; i++) (function(t) {
setTimeout(function() {
console.log(t);
}, t*1000)
}(i))
This is the answer!
Less code, easy to integrate.
for (let i = 1; i < 10 ; i++){
var time = i * 1000
setTimeout(function(){console.log("re" + i);}, time)
}
Since node 7.6, you can use a handy promisify method that makes sleeping a one liner.
CommonJS:
const sleep = require('util').promisify(setTimeout);
ESM:
import { promisify } from "util";
const sleep = promisify(setTimeout);
In your code:
;(async function() {
for(var i = 0; i < 10; i++) {
console.log(i);
await sleep(10000);
}
})();
How to call a function 10 times like
for(x=0; x<10; x++) callfunction();
but with 1 sec between each call?
function callNTimes(func, num, delay) {
if (!num) return;
func();
setTimeout(function() { callNTimes(func, num - 1, delay); }, delay);
}
callNTimes(callfunction, 10, 1000);
EDIT: The function basically says: make a call of the passed function, then after a bit, do it again 9 more times.
You can use setInterval for repeated execution with intervals and then clearInterval after 10 invocations:
callfunction();
var callCount = 1;
var repeater = setInterval(function () {
if (callCount < 10) {
callfunction();
callCount += 1;
} else {
clearInterval(repeater);
}
}, 1000);
Added: But if you don't know how long it takes your callfunction to execute and the accurate timings between invocation starting points are not important it seems it's better to use setTimeout for reasons mentioned by Paul S and those described in this article.
Another solution
for(var x=0; x<10; x++) window.setTimeout(callfunction, 1000 * x);
You can try to use setInterval and use a variable to count up to 10. Try this:
var number = 1;
function oneSecond () {
if(number <= 10) {
// execute code here..
number++;
}
};
Now use the setInterval:
setInterval(oneSecond, 1000);
Similar to Amadan's answer but with a different style of closure which means you re-use instead of creating new functions
function call(fn, /* ms */ every, /* int */ times) {
var repeater = function () {
fn();
if (--times) window.setTimeout(repeater, every);
};
repeater(); // start loop
}
// use it
var i = 0;
call(function () {console.log(++i);}, 1e3, 10); // 1e3 is 1 second
// 1 to 10 gets logged over 10 seconds
In this example, if you were to set times to either 0 or Infinity, it would run forever.
I don't know if there's a proper name, but I use a repeater:
function Repeater(callback, delay, count) {
var self = this;
this.timer = setTimeout(function() {self.run();},delay);
this.callback = callback;
this.delay = delay;
this.timesLeft = count;
this.lastCalled = new Date().getTime();
}
Repeater.prototype.run = function() {
var self = this;
this.timesLeft--;
this.callback();
this.lastCalled = new Date().getTime();
if( this.timesLeft > 0) {
this.timer = setTimeout(function() {self.run();},this.delay);
}
}
Repeater.prototype.changeDelay = function(newdelay) {
var self = this;
clearTimeout(this.timer);
this.timer = setTimeout(function() {self.run();},
newdelay-new Date().getTime()+lastcalled);
this.delay = newdelay;
}
Repeater.prototype.changeCount = function(newcount) {
var self = this;
if( this.timesLeft == 0) {
this.timer = setTimeout(function() {self.run();},this.delay);
}
this.timesLeft = newcount;
if( this.timesLeft == 0) clearTimeout(this.timer);
}
You can then use it like this:
new Repeater(callfunction, 1000, 10); // 1 second delay, 10 times
const functionCounterTimer = (callCount) => {
if (callCount < 10) {
setTimeout(() => {
++callCount
console.log("Function Call ", callCount);
functionCounterTimer(callCount);
}, 1000);
}
}
functionCounterTimer(0);
The above was my approach to a similar question.
setInterval(function(){},1000);
Calls the function for every second...
You can also use setTimeout for your thing to work.