setTimeout 似乎立即执行

Question

我正在尝试自学一些 JavaScript 并同时使用递归。我在下面编写的代码希望将“吸入”打印到控制台 10 次，打印之间有 5 秒的延迟。然而，当我在 Chrome 的开发工具中查看控制台时，所有条目在刷新页面后似乎都会立即打印出来。谁能帮我找到我的实施中的错误？谢谢！

function breathe(type, counter, limit, duration) {
  if(counter <= limit) {
    setTimeout(console.log(type), duration);
    counter++;

    return breathe(type, counter, limit, duration);
  }

  console.log("Finished!");
}

var breathing = breathe("inhale", 1, 10, 5000);

Answer 1

setTimeout 方法需要一个函数引用。这应该可以。

function breathe(type, counter, limit, duration) {
  if(counter <= limit) {
    setTimeout(function(){console.log(type)}, duration);
    counter++;

    return breathe(type, counter, limit, duration);
  }

  console.log("Finished!");
}

var breathing = breathe("inhale", 1, 10, 5000);

Answer 2

这是因为您正在立即执行 console 语句（因为您正在通过 () 执行 console.log），而不是传入对 setTimeout 的函数引用：

setTimeout(console.log(type), duration);

试试这个：

setTimeout(function() {
    console.log(type)
}, duration);  

您可以使用的另一种形式（只是为了强调传递函数引用的概念）是这样的：

function callMeAfterDelay() {
    console.log(type);
}

setTimeout(callMeAfterDelay, duration);

Answer 3

setTimeout(console.log(type), duration);

这是立即执行console.log(type)，然后将结果传递给setTimeout。 console.log 的结果是undefined，所以超时后什么都不会发生。

相反，您想这样做：

setTimeout(function () {
    console.log(type);
}, duration);

Answer 4

我想这就是你想要的：

function breathe(type, counter, limit, duration) {
  if(counter <= limit) {
    setTimeout(function(){
        console.log(type);
        counter++;

        return breathe(type, counter, limit, duration);
    }, duration);
  }

  console.log("Finished!");
}

var breathing = breathe("inhale", 1, 10, 5000);

Answer 5

var counter = 0;

var duration = 2000

var text = "Inhale";

var limit = 10;

function print(counter, duration, text, limit) {
  setTimeout(function(){
    console.log(text, counter)
    counter++;
    if (counter < limit) {
      print(counter, duration, text, limit);
    }
  },duration)
};

print(counter, duration, text, limit);

试试这个。