请查看此代码段

Question

我想在setTimeout()的循环中调用函数，并将计数器作为参数传递。这就是我的尝试：

<!DOCTYPE html>
<html><body>

<button onclick="timed1()">Display alerts</button>

<script>
function timed1() {
 for (i=1; i<4; i++){
  setTimeout(
     (function(i){ alert(i) })(i), 1000*i
   );
 }
}
</script>

</body></html>

函数调用使用正确的值完成，但是立即而不是我想要的间隔。我已经阅读了this和this SO问题，但遗憾的是我还没有看到我的情况会发生什么变化。

Answer 1

如果要将let的不同值绑定到setTimeout函数

，可以在此处使用i

function timed1() {
    for (let i=1; i<4; i++){
      setTimeout(function() { 
          alert(i) 
      }, 1000*i)
    }
}
timed1()

Answer 2

表达式(function(i){ alert(i) })(i)不会返回setTimeout调用的函数。如果你采用IIFE方式，请务必从中返回一个新函数：

setTimeout((function(i) {
    return function() {
        alert(i);
    };
})(i), 1000 * i);

使用ES2015 +可以实现更好的可读性：

for (let i = 1; i < 4; i++) {
    setTimeout(() => alert(i), 1000 * i);
}

Answer 3

您正在IIFE游泳（立即调用函数表达式）。

您立即调用了您的功能。

setTimeout(
   (function(i){ alert(i) })(i), 1000*i
);                           ^

变量i的范围已打开，您需要使用let关键字。

for (i = 1; i < 4; i++) {
     ^

请查看此代码段

＆＃13;

function timed1() {
  for (let i = 1; i < 4; i++) {
    setTimeout(
      function() {
        alert(i)
      }, 1000 * i);
  }
}

＆＃13;

<button onclick="timed1()">Display alerts</button>

＆＃13;

Answer 4

setTimeout函数允许您将参数传递给回调函数，如下所示：

function timed1() {
  for (i=1; i<4; i++){
    setTimeout(alert, 1000 * i, i);
  }
}

timed1()

时间之后的任何参数都会传递给回调。

将参数传递给setTimeout中的函数

4 个答案:

请查看此代码段