Javascript loop for time

How to use setTimeout inside a for loop in JavaScript

In this tutorial, we are going to learn about the how can we use setTimeout method inside a for loop in JavaScript with the help of examples.

Let’s see what happens when we add a setTimeout method inside a for loop.

for (var i=0;i5;i++) setTimeout(function() console.log(i); >, 1000); > //---> Output 5,5,5,5,5

After 1000 milliseconds we will see a 5 is logged inside browser console but we need 0,1,2,3,4 this happens because of JavaScript is executing the code in synchronous fashion(it means one line after another) but setTimeout method is asynchronous so that JavaScript runs the asynchronous code once the synchronous code execution is completed.

At the time of synchronous code (for loop) execution is completed the variable i value is 5 so that we can see 5 inside our console.

The problem can be solved by using an es6 let keyword because it creates a new variable on each iteration but var keyword is using the same variable throughout the for loop execution.

for (let i=0;i5;i++) setTimeout(function() console.log(i); >, 1000); > // -- > output 0,1,2,3,4

If you don’t like using es6 let keyword, we can also solve the problem by using immediately invoked function expression (IIFE).

for (var i = 0; i  5; i++)  (function(val)  //val is parameter setTimeout(function()  console.log(val); >, 1000); >)(i); // i is argument > // -- > output 0,1,2,3,4

In the above code, on each iteration the function is invoked by itself a var i is passed an argument to the function so that we can see the expected output because on each iteration the variable i is holding a different value.

for (var i = 0; i  5; i++)  function timeout(val)  setTimeout(function()  console.log(val); >, 1000); > timeout(i); >

Источник

Javascript loop for time

The for statement creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement (usually a block statement) to be executed in the loop.

Try it

Syntax

for (initialization; condition; afterthought) statement 

An expression (including assignment expressions) or variable declaration evaluated once before the loop begins. Typically used to initialize a counter variable. This expression may optionally declare new variables with var or let keywords. Variables declared with var are not local to the loop, i.e. they are in the same scope the for loop is in. Variables declared with let are local to the statement.

The result of this expression is discarded.

An expression to be evaluated before each loop iteration. If this expression evaluates to true, statement is executed. If the expression evaluates to false, execution exits the loop and goes to the first statement after the for construct.

This conditional test is optional. If omitted, the condition always evaluates to true.

An expression to be evaluated at the end of each loop iteration. This occurs before the next evaluation of condition . Generally used to update or increment the counter variable.

A statement that is executed as long as the condition evaluates to true. You can use a block statement to execute multiple statements. To execute no statement within the loop, use an empty statement ( ; ).

Examples

Using for

The following for statement starts by declaring the variable i and initializing it to 0 . It checks that i is less than nine, performs the two succeeding statements, and increments i by 1 after each pass through the loop.

for (let i = 0; i  9; i++)  console.log(i); // more statements > 

Initialization block syntax

The initialization block accepts both expressions and variable declarations. However, expressions cannot use the in operator unparenthesized, because that is ambiguous with a for. in loop.

for (let i = "start" in window ? window.start : 0; i  9; i++)  console.log(i); > // SyntaxError: 'for-in' loop variable declaration may not have an initializer. 

// Parenthesize the whole initializer for (let i = ("start" in window ? window.start : 0); i  9; i++)  console.log(i); > // Parenthesize the `in` expression for (let i = ("start" in window) ? window.start : 0; i  9; i++)  console.log(i); > 

Optional for expressions

All three expressions in the head of the for loop are optional. For example, it is not required to use the initialization block to initialize variables:

let i = 0; for (; i  9; i++)  console.log(i); // more statements > 

Like the initialization block, the condition part is also optional. If you are omitting this expression, you must make sure to break the loop in the body in order to not create an infinite loop.

for (let i = 0; ; i++)  console.log(i); if (i > 3) break; // more statements > 

You can also omit all three expressions. Again, make sure to use a break statement to end the loop and also modify (increase) a variable, so that the condition for the break statement is true at some point.

let i = 0; for (;;)  if (i > 3) break; console.log(i); i++; > 

However, in the case where you are not fully using all three expression positions — especially if you are not declaring variables with the first expression but mutating something in the upper scope — consider using a while loop instead, which makes the intention clearer.

let i = 0; while (i  3)  console.log(i); i++; > 

Lexical declarations in the initialization block

Declaring a variable within the initialization block has important differences from declaring it in the upper scope, especially when creating a closure within the loop body. For example, for the code below:

for (let i = 0; i  3; i++)  setTimeout(() =>  console.log(i); >, 1000); > 

It logs 0 , 1 , and 2 , as expected. However, if the variable is defined in the upper scope:

let i = 0; for (; i  3; i++)  setTimeout(() =>  console.log(i); >, 1000); > 

It logs 3 , 3 , and 3 . The reason is that each setTimeout creates a new closure that closes over the i variable, but if the i is not scoped to the loop body, all closures will reference the same variable when they eventually get called — and due to the asynchronous nature of setTimeout , it will happen after the loop has already exited, causing the value of i in all queued callbacks’ bodies to have the value of 3 .

This also happens if you use a var statement as the initialization, because variables declared with var are only function-scoped, but not lexically scoped (i.e. they can’t be scoped to the loop body).

for (var i = 0; i  3; i++)  setTimeout(() =>  console.log(i); >, 1000); > // Logs 3, 3, 3 

The scoping effect of the initialization block can be understood as if the declaration happens within the loop body, but just happens to be accessible within the condition and afterthought parts. More precisely, let declarations are special-cased by for loops — if initialization is a let declaration, then every time, after the loop body is evaluated, the following happens:

1. A new lexical scope is created with new let -declared variables.
2. The binding values from the last iteration are used to re-initialize the new variables.
3. afterthought is evaluated in the new scope.

So re-assigning the new variables within afterthought does not affect the bindings from the previous iteration.

Creating closures allows you to get hold of a binding during any particular iteration. This explains why closures created within the initialization section do not get updated by re-assignments of i in the afterthought .

for (let i = 0, getI = () => i; i  3; i++)  console.log(getI()); > // Logs 0, 0, 0 

This does not log «0, 1, 2», like what would happen if getI is declared in the loop body. This is because getI is not re-evaluated on each iteration — rather, the function is created once and closes over the i variable, which refers to the variable declared when the loop was first initialized. Subsequent updates to the value of i actually create new variables called i , which getI does not see. A way to fix this is to re-compute getI every time i updates:

for (let i = 0, getI = () => i; i  3; i++, getI = () => i)  console.log(getI()); > // Logs 0, 1, 2 

In fact, you can capture the initial binding of the i variable and re-assign it later, and this updated value will not be visible to the loop body, which sees the next new binding of i .

for ( let i = 0, getI = () => i, incrementI = () => i++; getI()  3; incrementI() )  console.log(i); > // Logs 0, 0, 0 

This logs «0, 0, 0», because the i variable in each loop evaluation is actually a separate variable, but getI and incrementI both read and write the initial binding of i , not what was subsequently declared.

Using for without a body

The following for cycle calculates the offset position of a node in the afterthought section, and therefore it does not require the use of a statement section, a semicolon is used instead.

function showOffsetPos(id)  let left = 0; let top = 0; for ( let itNode = document.getElementById(id); // initialization itNode; // condition left += itNode.offsetLeft, top += itNode.offsetTop, itNode = itNode.offsetParent // afterthought ); // semicolon console.log( `Offset position of "$id>" element: left: $left>px; top: $top>px;`, ); > showOffsetPos("content"); // Logs: // Offset position of "content" element: // left: 0px; // top: 153px; 

Note that the semicolon after the for statement is mandatory, because it stands as an empty statement. Otherwise, the for statement acquires the following console.log line as its statement section, which makes the log execute multiple times.

Using for with two iterating variables

You can create two counters that are updated simultaneously in a for loop using the comma operator. Multiple let and var declarations can also be joined with commas.

const arr = [1, 2, 3, 4, 5, 6]; for (let l = 0, r = arr.length - 1; l  r; l++, r--)  console.log(arr[l], arr[r]); > // 1 6 // 2 5 // 3 4 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 5, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник