Question

我需要在for循环中获取此代码。所以我不必写4次，我只是无法使其工作。

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);

到目前为止，我的回答是

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

Answer 1

你走了：

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

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

更新（现在使用闭包）

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';
  };
}

Answer 2

这对你有用。我认为循环不会等到setTimeout，这就是你的问题。

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);
}

Answer 3

dhouty的解决方案无法工作的原因是因为循环在异步函数中携带递增值的问题。

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);
}

Answer 4

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);

Answer 5

    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"
                }())
            }
        )
    }

Answer 6

这是因为提供给i的匿名函数将在for循环之后运行，无论指定的时间如何。

此时函数所看到的i变量是循环的 end 的当前变量for，因为setTimeout函数在循环。

由于javascript中没有阻止范围，因此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); };循环不会创建闭包。要解决您的问题，您需要这个（或类似的效果）：

这里的函数引入了一个闭包，这意味着i的值将引用favicon.ico的当前值，而不是循环运行后的值。

在for循环中使用setTimeout

6 个答案: