javascript - JS中的while循环内的SetTimeout

Question

有一个巨大的头脑空白，有人可以解释为什么setTimeout在这个while循环中不起作用：

http://jsbin.com/aHAcIsE/1/edit

var checks = document.querySelectorAll('input[type="checkbox"]'),
    i = checks.length,
    arr = [1, 4, 7];

function check(index){
  checks[index].checked = true;
}

while(i--){
  if(arr.indexOf(i) > -1){
    setTimeout(function(){
      check(i);
    }, 1000);        
  }
}

Answer 1

您的问题是，当setTimeout()最终执行回调时，该回调的所有调用都引用同一个变量i，该变量对所有实例具有相同的值。

直截了当的解决方案（i作为参数提交给回调；然后每个回调都会收到自己的副本i）。（根据MDN，IE<9 不支持额外的参数传递，因此我们需要为这些浏览器稍微修改版本。）

// IE9+ version
while(i--){
  if(arr.indexOf(i) > -1){
    setTimeout(function( index ){
      check(index);
    }, 1000, i );        
  }
}

// for IE below version 9
while(i--){
  if(arr.indexOf(i) > -1){
    !function( index ) {
      setTimeout(function(){
        check(index);
      }, 1000 ); 
    }( i );       
  }
}

重组解决方案（这里不需要循环内的回调，因此不存在问题）：

setTimeout( function(){   
  while(i--){
    if(arr.indexOf(i) > -1){
      check(index);
    }   
  } 
}, 1000 );