setInterval()传参时无法更新变量值的原因与实现方案

• setInterval的传参是一次性快照：给setInterval传入第三个及后续参数时，JS引擎只会在定时器初始化的瞬间，对这些参数做一次值拷贝存下来，后续每次触发回调时，都只会把这份固定的快照值传入回调，不会动态同步原变量的最新值。你初始化时传入的i值为0，引擎就会永久把这份0的拷贝传给回调，不会后续更新。
• 函数作用域存在隔离边界：带参版本的increase函数中，形参i属于函数级别的局部变量，和外部全局作用域声明的i是完全独立的两个变量。函数内执行i++修改的只是自己作用域里的局部形参，既不会影响外部的全局i，也改变不了定时器存储的那份0的快照，因此控制台永远只会输出0。
• 无参版本的行为逻辑：不带参的increase函数没有定义自己的局部i变量，执行时会顺着作用域链向上查找，直接操作外部全局作用域的i，每次自增都会实际修改全局变量的存储值，因此能持续输出0、1、2…的递增序列。

完全不需要强制把回调改成无参形式、硬依赖全局变量，有多种符合需求的实现方式：

• 用引用类型作为回调参数：JS中数字、字符串这类原始类型是值传递，函数内修改形参不会影响外部原变量；但对象、数组这类引用类型传递的是引用地址拷贝，函数内修改其属性会直接作用于外部原对象。这种方式可以直接保留带参回调的形式，不需要额外包装。示例代码：

// 回调接收外部传入的状态对象参数
function increase(state) {
  console.log(state.num);
  state.num++;
}
// 用对象封装自增状态，避免全局变量污染
const state = { num: 0 };
// 直接把对象作为setInterval的传参
setInterval(increase, 1000, state);

• 用包装函数实现动态传参：如果一定要用数字这类原始类型作为回调参数，可以在定时器外层包一层包装函数，在每次定时器触发的瞬间，手动读取最新的变量值传入回调，同时接收回调返回的新值更新外部状态。示例代码：

// 回调接收数值参数，打印后返回自增结果
function increase(i) {
  console.log(i);
  return i + 1;
}
let i = 0;
// 每次触发时手动读取最新值并传入回调
setInterval(() => {
  i = increase(i);
}, 1000);

• 用闭包封装独立状态：如果不想暴露全局变量，可以通过闭包把自增状态封装在独立作用域中，既避免全局污染，也不需要在定时器调用时反复传参。示例代码：

// 生成带有独立计数状态的回调
function createCounter(startNum = 0) {
  let count = startNum;
  return () => {
    console.log(count++);
  };
}
setInterval(createCounter(0), 1000);

内容的提问来源于stack exchange，提问作者Christian Bernal