javascript - 覆盖数据的超时(JS)

Question

我有一个循环，它使用不同的超时间隔使用不同的参数三次调用函数:

<script type="text/javascript">
    var myArray = [];

    for (i=0; i<3; i++) {
        myArray[i] = [];
        myArray[i]['second'] = (1+i)*3000;
        myArray[i]['valeur'] = i+i;

        setTimeout(function() {
            otherfunction(myArray[i]['valeur']);
        }, myArray[i]['second']);
    }

    function otherfunction(data1) {
        console.log(data1);
    }
</script>

脚本正确调用了 otherfunction() 但出现错误:

Uncaught TypeError: Cannot read property 'valeur' of undefined

我该如何解决这个问题。看起来像是关于变量范围的问题。

Answer 1

改成这样:

for (i=0; i<3; i++)
{

    myArray[i] = new Array();
    myArray[i]['second'] = (1+i)*3000;
    myArray[i]['valeur'] = i+i;


    var timeoutCallback = (function(valeur){
        return function(){
            otherfunction(valeur);
        }
    })(myArray[i]['valeur']);

    setTimeout(timeoutCallback, myArray[i]['second']);


}

这里的要点是使用 JavaScript 闭包 将变量的当前值保存在一个范围内，用于类似函数的回调。

如您所见，我们这里有 2 个嵌套函数，第一个创建一个安全范围来保存 myArray[i]['valeur'] 的当前值，这完全取决于变量 i，它在您的 for 循环中没有固定值。

有关查看此问题的更多信息，这是有史以来最有值(value)的答案:

How do JavaScript closures work?