循环内的javascript var声明

Question

/*Test scope problem*/
for(var i=1; i<3; i++){
    //declare variables
    var no = i;
    //verify no
    alert('setting '+no);

    //timeout to recheck 
    setTimeout(function(){
        alert('test '+no);
    }, 500);
}

它按预期警告“设置 1”和“设置 2”，但超时后它输出“测试 2”两次 - 由于某种原因，变量“否”在第一个循环后未重置...

我只找到了一个“丑陋”的解决方法:

/*Test scope problem*/
var func=function(no){
    //verify no
    alert('setting '+no);

    //timeout to recheck 
    setTimeout(function(){
        alert('test '+no);
    }, 500);
}
for(var i=1; i<3; i++){
    func(i);
}

关于如何以更直接的方式解决此问题的任何想法？或者这是唯一的方法？

Answer 1

JavaScript 没有 block 作用域，变量声明被提升。这些事实共同意味着您的代码等同于:

var no;

/*Test scope problem*/
for(var i=1; i<3; i++){
    //declare variables
    no = i;
    //verify no
    alert('setting '+no);

    //timeout to recheck 
    setTimeout(function(){
        alert('test '+no);
    }, 500);
}

当您的超时函数执行时，循环早已结束，no 保留其最终值 2。

解决这个问题的方法是将 no 的当前值传递给一个函数，该函数为每次调用 setTimeout 创建一个新的回调。每次创建一个新函数意味着每个 setTimeout 回调都绑定(bind)到具有自己的一组变量的不同执行上下文。

var no;

/*Test scope problem*/
for(var i=1; i<3; i++){
    //declare variables
    no = i;
    //verify no
    alert('setting '+no);

    //timeout to recheck 
    setTimeout( (function(num) {
            return function() {
                alert('test '+num);
            };
        })(no), 500);
}