IIFE 和带有 setInterval plain JS 的箭头函数

Question

我有以下代码：

window.setInterval((array => {
  console.log(array[0]++);
  console.log(array[1]++);
})([0, 0]), 500);

我预计上面的代码会产生 0 和 0 每个运行（500 毫秒）。然而，事实并非如此。它只运行一次。当我尝试时：

window.setInterval((array => () => {
  console.log(array[0]++);
  console.log(array[1]++);
})([0, 0]), 500);

成功了。我认为第一个仍然会每 500 毫秒打印出 0 和 0，因为带有参数 array 的 IIFE 将始终为每个运行赋予值 [0, 0] （然而，事实并非如此，它运行只有一次！）。然后，第二个代码以某种方式允许 array 到 "remember" 其先前的值并根据运行更新其值。有人可以给我解释一下吗？

Answer 1

传递给setInterval的第一个参数应该是一个函数。在第一个片段中，您 立即调用 一个函数并返回 undefined:

window.setInterval((array => {
  console.log(array[0]++);
  console.log(array[1]++);
})([0, 0]), 500);

相当于

window.setInterval(() => {
  // do something, return undefined
})(), 500);

一旦评估了 IIFE：

window.setInterval(undefined, 500);

因此，您需要类似第二个片段的内容，其中 IIFE 还 returns 一个函数：

window.setInterval((array => () => {
  console.log(array[0]++);
  console.log(array[1]++);
})([0, 0]), 500);

不过，您可以考虑在外部 IIFE 中定义 array 以使代码更清晰：

window.setInterval(
  (() => {
    const array = [0, 0];
    return () => {
      console.log(array[0]++);
      console.log(array[1]++);
    };
  })(),
  500
);

IIFE 和带有 setInterval plain JS 的箭头函数

IIFE and Arrow Functions with setInterval plain JS

javascript

arrow-functions

iife