一个 setTimeout 问题小探索

问题

之前有提到一个异步问题，如下代码输出什么： for(var i = 0;i<10;i++){ setTimeout(function(){ console.log(i);
},1000); } 这是我近期遇到的一个面题。当时我并不知道。不过后来面试官告诉我， setTimeout 是异步执行的。并且告诉了我答案。后来在群里边讨论，明白了。会输出 10 个 10 。

探索

为什么呢？首先， setTimeout 是异步执行的。所以在 setTimeout 执行之前，全局变量 i 早就已经变成了 10 。

那么如何解决能让他输出 0-9 呢？其实要解决的就是：在使用 i 的时候保证 i 的值还是我们当时希望的那个值。

如果不考虑兼容性，我们可以使用 es6 的 let ，把每个 i 变成一个局部变量。代码如下： for(let i = 0;i<10;i++){ setTimeout(function(){ console.log(i);
},1000); } 如果要考虑兼容性，那么我们用一个匿名函数，把 i 当做参数传进去，这样我们再用的 i 就是局部变量了。不会受到外边的影响了。代码如下：

for(var i = 0;i<10;i++){
  (function(i){
    setTimeout(function(){
      console.log(i);  
    },1000);
  })(i)
}

如果使用 promise ，那么我们可以使用如下写法：

for(var i = 0;i<10;i++){
  new Promise((resolve,reject)=>{
    setTimeout(resolve(console.log(i)),1000);
  });
}

执行效率上的考虑：

console.time('a');
for(let i = 0;i<10;i++){
  setTimeout(function(){
    console.log(i);  
  },1000);
}
console.timeEnd('a');
console.time('b');
for(var i = 0;i<10;i++){
  (function(i){
    setTimeout(function(){
      console.log(i);  
    },1000);
  })(i)
}
console.timeEnd('b');
console.time('c');
for(var i = 0;i<10;i++){
  new Promise((resolve,reject)=>{
    setTimeout(resolve(console.log(i)),1000);
  });
}
console.timeEnd('c');

效率上，我在目前新版 chrome 的执行结果如下：

a: 0.228ms
b: 0.203ms
c: 5.863ms

注意：可能不同系统不同环境的执行结果不一样。所以，有时候极客玩玩就是了，认真你就输啦-.-

总结

以前我偏执的认为，能做出东西就行了。基础不重要。所以我总是一只停留在做东西的阶段。但是后来反过来想：假设你想买车，那么你会选一个对汽车参数很熟的销售员还是选择一个你问什么问题他都说查查再回答你的销售员呢？答案是肯定的。所以说，可能公司招人也一样吧。

但是，这些问题真的有用吗？没错，我都有很多问题没回答好，如果是为了准备一次很 nice 的面试，我大可以特意的多跑几家，然后把遇到的有问题的面试题都总结下来。不会的再去查询，我想翻来覆去也没多少基础可问吧？就像找个美工就问：你会切图嘛？这些稍微花点时间都能学会的问题。个人觉得没特别大的意义。

（本文摘取自我的博客： http://79px.com/blog/57cd347be61eaab312faec27 ）