setTimeout与循环闭包的示例分析

发布时间：2021-09-17 09:10:45 作者：柒染
来源：亿速云阅读：134

# setTimeout与循环闭包的示例分析

## 引言

在JavaScript异步编程中，`setTimeout`与循环闭包的组合常会引发令人困惑的现象。本文将通过多个代码示例，深入分析这种组合产生的问题及其解决方案。

## 一、基础概念回顾

### 1.1 setTimeout的工作原理
```javascript
setTimeout(callback, delay)

将callback函数加入任务队列
在指定delay毫秒后执行（最小延迟4ms）
执行时机受事件循环机制影响

1.2 闭包的核心特征

function outer() {
  let count = 0;
  return function inner() {
    return ++count;
  }
}

内部函数访问外部作用域变量
变量持久化存储
每次调用独立维护作用域

二、经典问题场景重现

2.1 问题代码示例

for (var i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}
// 输出：6 6 6 6 6（每秒一个）

2.2 现象解析

同步循环立即执行完毕，i最终值为6
所有回调函数共享同一个i的引用
当回调执行时，访问的都是最终的i值

三、作用域深度分析

3.1 变量提升与作用域链

// 实际执行等价于
var i;
for (i = 1; i <= 5; i++) {
  // ...
}

3.2 执行上下文变化

时间点	i值	内存状态
t=0ms	6	5个定时器已注册
t=1000ms	6	第一个回调执行
…	…	…

四、解决方案对比

4.1 IIFE（立即执行函数）

for (var i = 1; i <= 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j);
    }, j * 1000);
  })(i);
}

原理：每次迭代创建新作用域
优点：ES5兼容性好
缺点：代码稍显冗余

4.2 let块级作用域

for (let i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

原理：每次迭代创建新绑定
优点：语法简洁
注意：需要ES6支持

4.3 setTimeout第三参数

for (var i = 1; i <= 5; i++) {
  setTimeout(function(j) {
    console.log(j);
  }, i * 1000, i);
}

原理：参数直接传递
兼容性：IE10+

五、进阶场景分析

5.1 多层嵌套循环

for (var i = 1; i <= 3; i++) {
  for (var j = 1; j <= 3; j++) {
    setTimeout(function() {
      console.log(i, j);
    }, (i * 3 + j) * 100);
  }
}
// 输出：4 4（共9次）

解决方案：

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    setTimeout(function() {
      console.log(i, j);
    }, (i * 3 + j) * 100);
  }
}

5.2 结合异步操作

const tasks = [];
for (var i = 0; i < 5; i++) {
  tasks.push(() => {
    return new Promise(res => {
      setTimeout(() => res(i), 1000);
    });
  });
}
// 所有Promise都resolve(5)

优化方案：

const tasks = Array(5).fill().map((_, i) => 
  () => new Promise(res => {
    setTimeout(() => res(i + 1), 1000 * (i + 1));
  })
);

六、性能与内存考量

6.1 内存占用对比

方案	每次迭代内存消耗	总内存消耗
var	1个闭包	低
IIFE	n个闭包	中
let	n个块作用域	中

6.2 执行效率测试

// 测试代码示例
console.time('let');
for (let i = 0; i < 10000; i++) {
  setTimeout(() => {}, 0);
}
console.timeEnd('let');

典型结果： - let方案：~120ms - IIFE方案：~150ms - var方案：~80ms（但结果错误）

七、最佳实践建议

现代项目：优先使用let+块级作用域
传统项目：采用IIFE方案
参数传递：合理利用第三个参数
代码审查：特别注意循环中的异步操作

八、延伸思考

8.1 事件循环的影响

for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i);
    while(true) {} // 阻塞测试
  }, 1000);
}

验证回调执行的独立性

8.2 与Promise的结合

async function process() {
  for (let i = 1; i <= 5; i++) {
    await new Promise(res => {
      setTimeout(() => {
        console.log(i);
        res();
      }, 1000);
    });
  }
}

结论

通过本文分析可见，理解闭包与异步执行的交互机制至关重要。选择适合的解决方案需要权衡： - 代码可读性 - 运行环境要求 - 性能需求 - 团队协作约定

正确运用这些知识，可以避免常见的陷阱，编写出更健壮的异步代码。

附录：完整测试代码

// 所有方案的完整实现对比
const implementations = [
  {
    name: 'Problematic var',
    code: () => {
      for (var i = 1; i <= 5; i++) {
        setTimeout(() => console.log('var:', i), i * 300);
      }
    }
  },
  {
    name: 'IIFE Solution',
    code: () => {
      for (var i = 1; i <= 5; i++) {
        (j => {
          setTimeout(() => console.log('IIFE:', j), j * 300);
        })(i);
      }
    }
  },
  {
    name: 'let Solution',
    code: () => {
      for (let i = 1; i <= 5; i++) {
        setTimeout(() => console.log('let:', i), i * 300);
      }
    }
  }
];

implementations.forEach(impl => {
  console.log(`\nRunning ${impl.name}:`);
  impl.code();
});

”`