异步Javascript变量覆盖

Asynchronous Javascript Variable Overwrite

本文关键字：覆盖 变量 Javascript 异步      更新时间：2023-09-26

代码有一个问题，即当调用异步函数时，变量会被重写。如何修复？

代码：

for (x in files) {
 asynchronousFunction(var1, var2, function(){
      console.log(x.someVaraible);
  }); 
}

现在的问题是，当调用asynchronousFunction中的回调函数时，x.files变量已更新为json数组文件中的下一个可变变量。我希望变量应该包含以前的值。

回调函数中的变量数不能更改，因此不能在回调函数中发送变量名。

在javascript中使用"local"变量的问题是，您的变量实际上具有函数作用域，而不是块作用域，如Java和C#等。

解决这一问题的一种方法是使用具有块范围的let，但目前只有firefox支持这一点。

所以这个代码只能在firefox:中工作

for (var x in files) {
  // This variable has BLOCK scope
  let file = files[x];
  asynchronousFunction(var1, var2, function(){
     console.log(file.someVariable);
  }); 
}

对于其他浏览器，另一种选择是使用闭包

for (var x in files) {
  var file = files[x];
  asynchronousFunction(var1, var2, (function(file){
      return function() {
                console.log(file.someVariable);
             };
  })(file); 
}

另一种方法是使用map/forEach，假设文件的数据类型是数组。

files.forEach(function(file) {
     asynchronousFunction(var1, var2, function(){
                console.log(file.someVariable);
             });
});

如果它不是一个阵列，那么你可以一直使用这种技术

 [].forEach.call(files, function(file) {
     asynchronousFunction(var1, var2, function(){
                console.log(file.someVariable);
             });
});

更全面的写作方式当然是

Array.prototype.forEach.call(files, function(file) {
     // As before

但我觉得[].forEach的眼睛更好看。

您需要将x与回调函数创建的闭包分离。简短回答：

for (x in files) {
    asynchronousFunction(var1, var2,
        (function(y){
            return function(){
                console.log(y.someVaraible);
            }
        })(x)
    ); 
}

关于更长的答案和解释，请参阅我对上一个问题的回答：请解释在循环

中使用JavaScript闭包

您需要将变量绑定到函数定义，或者将变量传递到函数中。我可能会采取一种组合方法，比如：

for (x in files) {
    var local_x = x;
    var fn = function () {
         theRealFunction( local_x );
    };
    asynchronousFunction(var1, var2, fn);
}

尽管在您的示例中，我不需要调用RealFunction（），因为它的代码量很小（只有console.log）

X被迭代，因此在调用回调函数时，X将是循环中最后一个迭代的函数。

通过使x像这样成为本地修复：

for (x in files) {
    (function() {
        var x = arguments[0];
        asynchronousFunction(var1, var2, function() {
            console.log(x.someVaraible);
        });
    }(x));
}
相关文章：