在循环中创建的函数中使用时出现数组引用问题

Array reference issues when using within a function created inside a loop

本文关键字：数组 引用 问题 创建 循环 函数      更新时间：2023-09-26

我知道，很棒的标题;-）

无论如何，假设我有以下代码（我确实如此）：

function GetArray(i) {
    if (i == 0) {
        return [1, 2, 3];
    }
    return [];
}
for (var i = 0; i < 3; i++) {
    var array = GetArray(i);
    var onClick = function() {
        alert(array.length);
    }
    var html = "<a>click me</a><br/>";
    var element = $(html);
    $("div").append(element);
    element.click(onClick);
}​

在此处查看工作代码

单击 3 个链接，并注意到每个链接的值为 0 的警报。

我想要的是单击时警报 3 的第一个链接。

现在，在你们开始大喊为什么会发生这种情况之前，我知道 onClick 函数正在使用对数组的同一实例的引用进行清除，因此循环的每次迭代都会"更改"数组，而不是创建一个新数组，这就是为什么实际上最后一个数组值用于所有单击事件。

所以问题是，我能做些什么来完成工作？

我想尝试在函数中"克隆"数组，但不起作用（我使用了.slice(0)），并且可能正确地不起作用。另外，我猜甚至可能只是所有 3 个事件都使用了完全相同的功能。

每当发生这种情况时，这都是一个范围问题。 每次通过数组时，都需要将数组锁定到 onClick 处理程序中。 您可以通过自调用函数围绕它创建一个闭包来做到这一点。

for (var i = 0; i < 3; i++) {
    var array = GetArray(i), onClick;
    // create a closure around onClick and array
    (function(array){
        onClick = function() {
            alert(array.length);
        }
    })(array);
    var html = "<a>click me</a><br/>";
    var element = $(html);
    $("div").append(element);
    element.click(onClick);
}​

请注意，这将提醒 3， 0， 0，因为第二次和第三次通过 leep 返回一个空数组。

相关文章：