Question

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

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

JS中的while循环中的SetTimeout

1 个答案: