We Keep Coding

javascript how to fix pitfalls counter [duplicate]

This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 4 months ago.
I'm trying to run a for loop and print the current index without use let
here my code:
function init() {
for (var index = 0; index < 5; ++index) {
setTimeout(() => {
console.log(index);
}, index);
}
}
I expected to: 0 1 2 3 4
but i get 5 5 5 5 5
Once the Var replace in Let the problem will be solved
I want to stay with Var
How can the problem be solved?
Thanks

function init() {
for (var index = 0; index < 5; ++index) {
const i = index;
setTimeout(() => {
console.log(i);
}, i);
}
}
This should work.

Clarification on how setTimeout & forloop interaction works

I am having trouble understanding why the answer is 9. From my understanding adding the setTimeout function into a for loop means that the setTimeout function will run 3 times for each loop. So it loops 3 times and in each loop, setTimeout runs 3 times for a total of 9 times? I am missing the understanding.
var result = 0;
for (var i = 0; i < 3; i++) {
setTimeout(function() {
result += i;
}, 1000);
}
console.log(result) // answer is 9

Javascript is a single-thread system. setTimeout basically puts your request on the call stack to be executed after 1 second.
It is still fired in the scope of your function, but at the end of it, with a 1 second delay.
At the end of your function, i === 3 and because you execute it 3 times, you'll get result === 9
You can see this more clearly if you do this:
var result = 0;
for (var i = 0; i < 3; i++) {
setTimeout(function() {
result += i;
console.log("i: " + i);
console.log("result: " + result)
}, 1000);
}
You can wrap up your timeout, to break the dependency on i.
Do this by placing setTimeout in a function and pass i into it. that way, it doesn't matter what i is,
as we are using j which is scoped inside the new function.
var result = 0;
for (var i = 0; i < 3; i++) {
(function(j){
setTimeout(function() {
result += j;
console.log("i: " + i);
console.log("j: " + j);
console.log("result: " + result)
}, 1000);
})(i);
}

setTimeout doesn't work JavaScript "style undefined" [duplicate]

This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 7 years ago.
I want to fade in 4 div boxes, one by one.
In css they have the opacity = 0.
Here my JavaScript code:
function fadeIn() {
var box = new Array(
document.getElementById('skill1'),
document.getElementById('skill2'),
document.getElementById('skill3'),
document.getElementById('skill4')
);
var pagePosition = window.pageYOffset;
if (pagePosition >= 1000) {
for (var i = 0; i < box.length; i++) {
setTimeout(function(i) {
box[i].style.opacity = "1";
}, i * 500);
}
}
}
Well, the function has to start if you scroll the page to the position 1000px and called in the body-tag:
Without the setTimeout it works, but with this function the console says:
Uncaught TypeError: Cannot read property 'style' of undefined
I'm a beginner and want to understand JS, so please don't provide an answer using jQuery.

By the time your your timeout runs, the loop has finished processing, so i will always be the last iteration. You need a closure:
for(var i = 0; i < box.length; i++) {
(function(index) {
setTimeout(function() {
box[index].style.opacity = "1";
}, index*500);
})(i)
}

The problem is the scope. When anonymous function executes inside timeout i variable has the last value of the i in the iteration. There are two solutions:
1) Use an IIFE:
for (var i = 0; i < box.length; i++) {
(function (i) {
setTimeout(function (i) {
box[i].style.opacity = "1";
}, i * 500);
})(i);
}
for (var i = 0; i < 5; i++) {
(function(i) {
setTimeout(function() {
console.log(i);//prints out 0 1 2 3 4
}, i * 500)
})(i);
}
2) Using let:
for (let i = 0; i < box.length; i++) {
setTimeout(function (i) {
box[i].style.opacity = "1";
}, i * 500);
}
"use strict";
for (let i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i)
}, i * 500)
}
The let statement declares a block scope local variable, optionally
initializing it to a value.
Keep in mind let is feature fo ecmaScript 6.

How to add delay using setTimeout for every iteration? [duplicate]

This question already has answers here:
How do I add a delay in a JavaScript loop?
(32 answers)
Closed 7 years ago.
This creates a 2 second delay and runs the loop. I need to create a 2 second delay for every iteration, not just once.
var myArray = ['test1','test2','test3'];
function doSetTimeout(index) {
setTimeout(function() { console.log(myArray[index]) }, 2000);
}
var index;
for (index = 0; index < myArray.length; ++index) {
doSetTimeout(index)
}
Expected result would be:
test1
(2 second delay)
test2
(2 second delay)
test3

Just multiply your delay by the index
var myArray = ['test1','test2','test3'];
function doSetTimeout(index) {
setTimeout(function() { console.log(myArray[index]) }, index * 2000;
}
var index;
for (index = 0; index < myArray.length; ++index) {
doSetTimeout(index)
}

How to show current loop iteration in click function, javascript [duplicate]

This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 8 years ago.
JSFiddle
var arr = [ [0], [1], [2], [3] ];
for ( var i = 0; i < arr.length; i++ ) {
$('#btn-' + i).click(function() {
console.log(i);
});
}
When I'm clicking on corresponding button console.log always shows me last iteration instead of the current iteration. Why?

Try creating a closure, In other words, create a scope per iteration. Now in your code all the event handlers are created in a single scope and the i inside of that scope would get updated instantly to 4. So as a result, when you clicking on all the buttons the result would be same. That is the updated one of i
for ( var i = 0; i < arr.length; i++ ) {
var j = function(x) {
$('#btn-' + x).click(function() {
console.log(x);
});
}
j(i);
}
DEMO

Because of closure! For that you can do this:
for (var i = 0; i < arr.length; i++) {
(function(n) {
$('#btn-' + i).click(function() {
console.log(n);
});
})(i);
}
DEMO