This question already has answers here:
setTimeout() method inside a while loop [duplicate]
(8 answers)
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 3 years ago.
I want to open a link every 3 seconds. I am using the setTimeout function, but it doesn't work. All links will be opened once.
for(var i=0; i < url.length-1; i++) {
setTimeout(function(){
linkaddress=url[i];
window.open(linkaddress);
}, 3000);
}
Use "let" instead of "var" for block level scoping, and then multiply your time by i variable (more info). Code:
var url = ["https://domain1.com","https://www.domain2.com"],
timeout = 3; // Time in second
for(let i=1; i <= url.length; i++){
setTimeout(function(){
linkaddress=url[i-1];
window.open(linkaddress);
}, i * timeout * 1000);
}
EDIT: Note that this code uses EcmaScript 6 features
Use setInterval instead
url = ['a', 'b', 'c'];
var i = 0;
var interval = setInterval(function() {
if (i <= url.length - 1) {
///linkaddress = url[i];
//window.open(linkaddress);
console.log(url[i]);
i++;
} else {
clearInterval(interval);
}
}, 3000);
Related
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 3 years ago.
I need help trying to increment my for loop so after 8 seconds my divs show not just one. I would prefer vanilla js if possible.
I have tried doing my own for loop and settimeout I have failed.
var googleAds = document.getElementsByClassName('pause');
var i;
for(var i = 0; i < googleAds.length; i++) {
setTimeout(function () {
googleAds[i].style.display = "block";
}, 8000);
}
isplaying after 8 seconds
You need to use the for loop inside the anonymous function for i to be in scope:
setTimeout(function () {
for(var i = 0; i < googleAds.length; i++) {
googleAds[i].style.display = "block";
}
}, 8000);
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:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 4 years ago.
I have a question which might sound silly. In the code below there are 2 console.log(i) statements. I want to know why does the second console.log(i) statement returns value of 2 and not 1 as the former on the first iteration (i.e. 1st statement i=n, 2nd: i=n+1). Shouldn't both be equal to 1 until the end of the loop?
function toggleWrapper(){
var el1 = document.querySelectorAll('[class="tCell entryDesc"]');
for (var i = 1; i < el1.length; i++) {
console.log(i);
el1[i].addEventListener('click', function(ev){
console.log(i);
var el2=document.querySelectorAll('[class="additionalInfoContainer"]');
if (el2[i-2].clientHeight) {
el2[i-2].style.maxHeight = 0;
}
else{
el2[i-2].style.maxHeight = el2[i-2].scrollHeight +"px";
}
},
false);
}
}
The problem is that the variable i, within each of your addEventListener() functions, is bound to the same variable outside of the function. simply change your for loop to :
for (let i = 1; i < el1.length; i++)
In the loop with let based index, each iteration through the loop will have a new value of i where each value is scoped inside the loop, so your code would work fine.
i think is something in your code because if you try to make a for loop with two "console.log()" it doesn't do that
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
How do I add a delay in a JavaScript loop?
(32 answers)
Closed 5 years ago.
I am trying to update CSS for all divs (one by one) with a certain class using plain Javascript loop. Here it is:
var timerCoinRow = 0;
var rows = document.querySelectorAll('.coin-row');
for (var i=0; i<rows.length; i++)
{
timerCoinRow += 500;
obj = rows[i];
setTimeout(function ()
{
obj.style.opacity = 1;
}, timerCoinRow);
}
for some reason it does not work. here is JQuery version that works fine but I need it in plain "vanilla" Javascript:
var timerCoinRow = 0;
$('.coin-row').each(function ()
{
timerCoinRow += 500);
var obj =$(this);
setTimeout(function ()
{
obj.css('opacity', '1');
},timerCoinRow,obj);
});
When I place obj.style.opacity = 1; outside the timeout - all divs are updated but simultaneously while I need them to appear one after another with a pause of 500ms. Please help - it's somewhere near but ....
This question already has answers here:
How do I pass the value (not the reference) of a JS variable to a function? [duplicate]
(6 answers)
Closed 8 years ago.
I have a script that needs a function to be run multiple times per object, but the number of objects is set in a variable by the user.
It would work like this
dothis(1);
dothis(2);
dothis(3);
However this doesn't work
for (var i = 0; i < howMany; i++)
{
setInterval(
function()
{
dothis(i);
},
(Math.floor(Math.random() * 10) + 1)
);
}
You need to snapshot the value of i in a local scope otherwise it gets dynamically 'regenerated' at execution time, which means the value would then always be howMany, since the CPU lock, created by the main function, prevents your setInterval/setTimeout functions to execute before the loop is ended.
for (var i = 0; i < howMany; i++)
{
setInterval(
function(j)
{
return function() { dothis(j); };
}(i),
(Math.floor(Math.random() * 10) + 1)
);
}
See How do JavaScript closures work? for further reference.