可变变量可以从jQuery中的闭包访问

Mutable variable is accessible from closure in jQuery

本文关键字：闭包 访问 变量 jQuery      更新时间：2023-09-26

我知道这可能是"双发"。但是我无法为我的问题分配解决方案。

我有 6 个文件上传输入字段。每当它们发生变化时，我都想提醒"已更改！我想用一个 for 循环遍历 6 个文件上传 id。现在，它给了我变量 i 的错误"可变变量可以从闭包访问"。我看到了一些解决方案。但是我无法将这些解决方案用于我的问题。

function fileUploadCheck() {
    for (var i = 1; i <= 6; i++) {
        $("document").ready(function () {
            $("#SOMEID"+i).change(function () {
                alert('changed!');
            });
        });
    }
}

jQuery使用隐式迭代。您不必手动循环。

$("input[type=file]").change(function(event) {
  // check your console to see the value of `this`
  console.log(this, "changed");
});

来自 jQuery .each docs

注意：大多数返回jQuery对象的jQuery方法也会遍历jQuery集合中的元素集 - 这个过程称为隐式迭代。发生这种情况时，通常不需要显式迭代 .each() 方法：

// The .each() method is unnecessary here:
$( "li" ).each(function() {
  $( this ).addClass( "foo" );
});
// Instead, you should rely on implicit iteration:
$( "li" ).addClass( "bar" );

关于您的"可变变量可以从闭包访问"，请参阅此简化示例

for (var i=1; i<=6; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}
// 777777
// ALL SEVENS? WTF

原因是，闭包取决于i，但i在闭包之外正在发生变化。当任何函数运行时，i 已经设置为 7 ，因此每个函数的记录输出7 。

如果您使用我上面的方法，则完全不必担心。如果您仍然好奇如何解决此问题，请参阅

for (var i=1, fn; i<=6; i++) {
  fn = (function(n) {
    console.log(n);
  })(i);
  setTimeout(fn, 100);
}
// 123456
// YAY

现在，每个函数都与不可变的i输入正确"绑定";这意味着i的值不会在闭包函数内部更改。查看 Function.prototype.bind 如果你对快捷方式感兴趣 ^.^

相关文章：