在 javascript 閉包中使用 setInterval

Question

我是 javascript 的新手，目前正在閱讀有關關閉的信息。 我試圖實現一個例子來更好地理解這個概念。

這是片段：

function getValue() {
  let a = 0

  const runner = async () => {
    a += 1
  }

  setInterval(runner, 100)
  
  return () => {
    return a
  }
}

let value = getValue()
console.log(value()) -----> logging statement 1

// some long operation

console.log(value()) -----> logging statement 2

但是，我看到的 output 是：

1
1

我期望兩個日志語句 output 有兩個不同的值。 我的理解是，一旦調用getValue() ， runner程序 function 就會定期執行。 變量a將得到更新，因此第二個console.log應該打印一個遞增的a值。

Answer 1

除了錯過主要部分外，您幾乎就在那里。

操作發生得太快了。 運行第二次迭代不需要 100 毫秒，因此值保持不變。

嘗試至少等待 100 毫秒，因為您的時間間隔需要增加該時間量。

如下例所示。

 function getValue() { let a = 0 const runner = async () => { a += 1 } setInterval(runner, 100) return () => { return a } } let value = getValue() console.log(value()) // operations are happening too fast setTimeout(() => console.log(value()), 100); setTimeout(() => console.log(value()), 200); setTimeout(() => console.log(value()), 300);

Answer 2

function getValue() {
  let a = 0

  const runner = () => {
    a += 1
    console.log("Runner's A: " +a)
  }

  setInterval(runner, 100)
  
  return () => {
    return a
  }
}

let value = getValue()
console.log(value());// -----> logging statement 1

// some long operation

console.log(value());// -----> logging statement 2

https://jsbin.com/geponejuba/edit?js,console,output

正如上面所指出的，js是單線程的，所以它的工作方式是，你的日志語句首先執行，如果沒有別的事情要做，那么 setTimeout/setInterval 會被執行（這是一個非常簡化的語句，你可以閱讀詳細版本的“事件循環”）

在我分享的示例 jsbin 中，您可以看到 setInterval 被調用並且確實在更新值。