用于性能测试的 for 循环中的 JavaScript setTimeout

Question

我正在尝试使用 setTimeout 进行使用 console.time() 和 console.timeEnd() 的性能测试。但是，setTimeout() 不会延迟 for() 循环。

这里是 JS 小提琴：

// Start the timer.
console.time('testFor');

for ( i = 0; i < 5; i++ ) {
  setTimeout( console.log('The number is ' + i), 2000 );
}

// End the timer, get the elapsed time.
console.timeEnd('testFor');

如何让 setTimeout() 在我的脚本中工作，为什么它对我不起作用？

Answer 1

其他人已经为您的问题提出了很好的解决方案 - 我想更仔细地检查您的代码发生了什么。

setTimeout 不会延迟代码的推进（就像 sleep 在其他语言中所做的那样），而是推迟运行另一个代码块。这是一个很难理解的奇怪概念；考虑以下示例：

console.time("Main Program");
console.time("Defered Code");

setTimeout(deferedCode, 1000);

console.timeEnd("Main Program");

function deferedCode() {
    console.timeEnd("Defered Code");
}

如果我们在运行此代码后查看控制台，我们将看到“主程序”几乎立即打印出来，大约一秒钟后打印出“延迟代码”。

我们已经要求 setTimeout 在未来 1000 毫秒的时间运行函数 deferedCode，然后让其余代码运行。

还要注意 deferedCode 被传递给 setTimeout 而没有 ()。我们将函数本身而不是deferedCode 的结果传递给setTimeout，以便setTimeout 可以选择何时运行它。

Answer 2

你可以在没有循环的情况下做到这一点，只需使用递归：

var i = 0;

var logNumber = function(){
    console.log('The number is ' + i);
    i++;
    if(i < 5){
        setTimeout(logNumber, 2000);
    }
}

logNumber();

Answer 3

setTimeout 是异步的。如果要定期调用某段代码，请使用 setInterval 函数。

我认为这段代码接近你想要做的：

// Start the timer.
console.time('testFor');

var i = 0;
var finish = 5;
var t = setInterval(function() {
  if (i < finish) {
    console.log('The number is ' + i);
    i++;
  } else {
    clearInterval(t);
    // End the timer, get the elapsed time.
    console.timeEnd('testFor');
  }
}, 2000);