javascript - 如何将变量传递给匿名函数

Question

我想传递变量 setTimeout发挥作用并用它做点什么。当我警告 i 的值时它显示了我没想到的数字。我在做什么错？我想要从 1 到 8 的日志值。

var end=8;
for (var i = 1; i < end; i ++) {
       setTimeout(function (i) {
           console.log(i);   

       }, 800);
   }

Answer 1

解决这个问题的标准方法是使用工厂函数:

var end=8;
for (var i = 1; i < end; i ++) {
       setTimeout(makeResponder(i), 800);
   }

function makeResponder(index) {
    return function () {
        console.log(index);   
   };
}

Live example | source

在那里，我们调用 makeResponder在循环中，它返回一个函数，该函数关闭传递给它的参数( index )而不是 i多变的。 (这很重要。如果您只是从匿名函数中删除了 i 参数，您的代码将部分工作，但所有函数都会在它们运行时看到 i 的值，而不是在它们最初计划的时候; 在您的示例中，他们都会看到 8 。)

更新 根据您的以下评论:

...will it be correct if i call it in that way setTimeout(makeResponder(i),i*800);?

是的，如果您的目标是让每个调用比上一个调用晚大约 800 毫秒，那将起作用:

Live example | source

I tried setTimeout(makeResponder(i),setInterval(i));function setInterval(index) { console.log(index*800); return index*800; } but it's not work properly

你不使用 setInterval那样，可能根本不想用它。

进一步更新 : 你在下面说:

I need first iteration print 8 delay 8 sec, second iteration print 7 delay 7 sec ........print 2 delay 2 sec ...print 0 delay 0 sec.

您只需再次应用上述原则，使用第二次超时:

var end=8;
for (var i = 1; i < end; i ++) {
       setTimeout(makeResponder(i), i * 800);
   }

function makeResponder(index) {
    return function () {
        var thisStart = new Date();
        console.log("index = " + index + ", first function triggered");
        setTimeout(function() {
            console.log("index = " +
                        index +
                        ", second function triggered after a further " +
                        (new Date() - thisStart) +
                        "ms delay");
        }, index * 1000);
   };
}

Live example | source

我认为您现在拥有推进这项工作所需的所有工具。