IIFE和箭头函数与setInterval plain JS

Question

我有以下代码：

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

我预计上面的代码每次运行会产生0和0（500ms）。但事实并非如此。它只运行一次。当我尝试：

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

有效。我认为第一个仍然会每500毫秒打印出0和0，因为带有参数array的IIFE将始终被赋予每次运行的值[0, 0]（但是，情况并非如此，它只运行一次！）。然后，第二个代码以某种方式允许array“记住”其先前的值并更新其每次运行的值。有人可以向我解释一下吗？

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也返回一个函数：

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
);