JavaScript 范围规则:如何在回调中使用 clearInterval()

Question

我正在尝试使用PluralSight上的课程学习JS，我发现了这个每秒打印"hello world"并在5秒后停止的示例。这是预期的解决方案，并且有效。

let counter = 0;
const intervalId = setInterval(() => {
  console.log('Hello World');
  counter += 1;
  if (counter === 5) {
    console.log('Done');
    clearInterval(intervalId);
  }
}, 1000);

我试图让它使用回调而不是内联函数，但我无法捕获 intervalID。我尝试将"this"作为函数参数传递，但这也不起作用。这里正确的方法是什么？

// doesn't work
let counter = 0;
const f = (intervalID) => {
    console.log("Hello World");
    counter += 1
    console.log(intervalID)
    if (counter ==5){
        console.log("Done")
        clearInterval(intervalID)
    }
}
const intervalID = setInterval(f, 1000)

Answer 1

您的intervalID不是传递给f的参数，但是如果您只是删除该参数，它将起作用，因为该intervalID是词法范围的，因此它可以在f中使用。

let counter = 0;
const f = () => {
    console.log("Hello World");
    counter += 1
    console.log(intervalID)
    if (counter ==5){
        console.log("Done")
        clearInterval(intervalID)
    }
}
const intervalID = setInterval(f, 1000)

或者传入intervalID也可以：

let counter = 0;
const f = (intervalID) => {
    console.log("Hello World");
    counter += 1
    console.log(intervalID)
    if (counter ==5){
        console.log("Done")
        clearInterval(intervalID)
    }
}
const intervalID = setInterval(() => f(intervalID), 1000)