use setTimeout in a for loop

Question

i need to get this code in a for loop.so i don't have to write it 4 times,i just can't make it work.

setTimeout(
    function(){
        document.getElementById("square").style.left="0px";
    },0);

setTimeout(
    function(){
        document.getElementById("square").style.left="100px";
    },1000);

setTimeout(
    function(){
        document.getElementById("square").style.left="200px";
    },2000);

setTimeout(
    function(){
        document.getElementById("square").style.left="300px";
    },3000);

my answer so far is this

for (i = 0; i <=300; i=i+100) {
    j = i*10;
    setTimeout(
        function (){
            document.getElementById("square").style.left=i+"px";
        }, j);
};

apart from maybe initializing j and i using `var`, whats wrong? Also your for loop has a colon at the end it doesn't need. — user1102901, Aug 20 '15 at 18:53

dhouty · Answer 1 · 2015-08-20T19:05:24.340

5

Here you go:

var square = document.getElementById('square');

for (var i = 0; i <= 3; i++) {
    setTimeout(function() {
        square.style.left = i * 100 + 'px';
    }, i * 1000);
}

UPDATE (now using a closure)

http://jsfiddle.net/c03hf5t5/

var square = document.getElementById('square');

for (var i = 0; i <= 3; i++) {
    setTimeout(setLeft(square, i * 100), i * 1000);
}

function setLeft(element, offset) {
  return function() {
    element.style.left = offset + 'px';
  };
}

edited Aug 20 '15 at 19:05

answered Aug 20 '15 at 18:56

dhouty

1,969
12
21

check out my answer, ive dealt with this before. – THE AMAZING Aug 20 '15 at 19:06
I updated mine as well to address the issue. – dhouty Aug 20 '15 at 19:06

DavidDomain · Answer 2 · 2015-09-09T23:04:01.520

3

This should work for you. I think the loop will not wait for setTimeout, that was your problem.

var square = document.getElementById('square');

function changeLeftPos(i, elem) {
    setTimeout(function() {
        elem.style.left = i * 100 + 'px';
    }, i * 1000);
}

for (var i = 0; i <= 3; i++) {
    changeLeftPos(i, square);
}

edited Sep 09 '15 at 23:04

answered Aug 20 '15 at 19:03

DavidDomain

14,976
4
42
50

yep! this one works! thanks a lot = – Jorgefilemon Aug 20 '15 at 19:07

score 2 · Answer 3 · answered Aug 20 '15 at 19:05

The reason dhouty's solution doesnt work is because loops have issues carrying incremented values inside asynchronous functions.

var square = document.getElementById('square');
for (var i = 0; i <= 3; i++) {
    (function(i){
        setTimeout(function() {
            square.style.left = i * 100 + 'px';
        }, i * 1000);
    })(i);
}

score 0 · Answer 4 · answered Aug 20 '15 at 19:03

0

var square = document.getElementById('square');
var i=0;
function example()
{
    square.style.left = i * 100 + 'px';
    if (i < 3){
        i++;
        setTimeout(example, 1000);
    }
}
setTimeout(example, 1000);

answered Aug 20 '15 at 19:03

user1102901

565
1
4
12

score 0 · Answer 5 · answered Aug 20 '15 at 19:04

    var v = [0, 100, 200, 300], c;
    for (ct = 0; ct <= v.length - 1; ct++) {
        setTimeout(
            function () {
                var vl = ct;
                (function () {
                    document.getElementById("square").style.left = vl + "px"
                }())
            }
        )
    }

score 0 · Answer 6 · answered Aug 20 '15 at 19:06

It is because the anonymous function supplied to setTimeout will be run after the for loop, regardless of the time specified.

At this point the variable of i that the function looks at is the current variable of i at the end of the loop, as the setTimeout function executes after the loop.

A for loop doesn't create a closure as there is no blocked scope in javascript. To fix your problem you will need this (or something to similar effect):

for (i = 0; i <=300; i=i+100) {
       j = i*10;
    (function(val) {
    setTimeout(
      function (val){
         document.getElementById("square").style.left=val+"px";
    }, j))(i);

};

The function here introduces a closure which means that the value of i will refer to the current value of i rather than what it will be after the loop has run.

use setTimeout in a for loop

6 Answers6