涉及 setTimeout() 方法的 JavaScript 代码帮助不大答案

【问题标题】：Little help with JavaScript code involving setTimeout() method涉及 setTimeout() 方法的 JavaScript 代码帮助不大
【发布时间】：2011-06-03 20:33:48
【问题描述】：

我试图理解关于这段代码的两件事：

var updateFn = function(num){
   return function(){
      if(num == 6){
         console.info("100%, all items saved!")
      }
      else{
         var i = num/6;
         var pct = Math.round(100 * i);
         console.info(pct + "% saved");
      }
  };
};

for (var i = 1; i < 7; i++){
   setTimeout(updateFn(i), i * 500);
}

根据我读到的关于 setTimeout() 语法的内容；
```
setTimeout("javascriptstatement",milliseconds);
```
那么，为什么我必须增加每个循环的毫秒数，直到总时间达到 500*6 毫秒？为什么setTimeout(updateFn(i), 500); 不能按预期工作？

为什么我必须为作为第一个参数传递的函数返回一个函数设置超时？

为什么这不起作用？：

var updateFn = function(num){
      if(num == 6){
         console.info("100%, all items saved!")
      }
      else{
         var i = num/6;
         var pct = Math.round(100 * i);
         console.info(pct + "% saved");
      }

};

for (var i = 1; i < 7; i++){
   setTimeout("updateFn(i)", i * 500);
}

提前致谢。

【问题讨论】：

这可能是简化您的发布代码的工件，但为什么要调用 setTimeout 呢？您正在调用的函数不是异步的，并且由于 JS 是单线程的，因此您的 setTimeouts 将完成的唯一事情是在调用下一个函数时延迟，并且只有在前一个函数完成时才延迟（500 毫秒对于该调用来说已经足够了，但取决于关于你在做什么，它可能不是）

标签： javascript settimeout

【解决方案1】：

似乎它设置了每 500 毫秒发生 6 次超时。我认为setInterval 在这里可能会更好。
你想要返回一个函数，因为如果你将一个字符串传递给setTimeout，它会得到evaled，如果你传递一个函数，它只会运行它。

似乎这段代码正在为保存操作制作进度表，但假设保存需要 3 秒，并且每 1/2 秒递增计数器可能不是最好的主意。

无论如何，与其设置6个超时，不如使用setInterval。

var updateFn = function(num){
  if(num == 6){
     console.info("100%, all items saved!");
     clearInterval(saving);
  }
  else{
     var i = num/6;
     var pct = Math.round(100 * i);
     console.info(pct + "% saved");
  }
};

var count = 1
var saving = setInterval(function(){
    updateFn(count++);
}, 500);

【讨论】：

【解决方案2】：

setTimeout(updateFn(i), 500); 按预期工作，但可能不是您希望的工作方式。

您基本上是在创建 6 个超时，它们在完全相同的时间（从现在起 500 毫秒）执行。

如果您希望它们彼此相隔 500 毫秒，那么setTimeout(updateFn(i), i * 500); 是正确的方法（或将setTimeout(updateFn(i), 500); 放在updateFn 函数内）。如果您希望它们每 500 毫秒发生一次，您也可以使用 setInterval。

【讨论】：

我不认为这是预期的 - 请注意，您将 setTimeout 传递给 updatedFn(i) 的 result。您是在立即调用它，而不是在超时之后。
@Matt 我的意思是，代码背后的逻辑是错误的，而不是代码工作方式的错误。如果他不希望它像那样工作，应该在实际 updateFn 函数中调用剩余的 5 个超时，或者使用 setInterval，如我的回答中所述。
我的错，我刚才看到他正在返回一个调用 updateFn(i) 的函数

【解决方案3】：

对于 1：没有理由（编辑：不，有：它推迟执行 500 毫秒。正如有人指出的那样，setInterval 是去那里的方法），显然：也许作者需要一种模拟的方法假储蓄功能中的一些“减速”效果。

对于 2：要使 setTimeout 工作，您不必返回一个函数，但您必须了解该代码的编写方式： setTimeout 的第一个参数是要执行的一些代码，并且非常标准地传递 setTimeout一个函数（就像一个匿名函数）。如：

setTimeout(function() {
   console.log("Hello world, 2 sec in the future");
}, 2000)

【讨论】：