Javascript 用作函数参数的变量发生更改，影响以后的函数调用

我不知道发生了什么，我花了无数个小时调试我的代码，直到我发现了弱点

概念 问题 您可以看到相同代码的两个块。第一个应该像上面描述的那样动态工作，但是两个链接引用相同的函数调用。( 这里的问题是，

键

在第一次回调中使用之前会被第二个赋值覆盖。事件回调不会与它们的定义函数同时调用，并且它们的定义函数不会等待它们运行。最简单的解决方案是使用两个独立的变量，但因为它看起来像是我看到一个展开的循环，您的代码实际上如下所示：

for(var key in hl){
    //compute i
    key = "inVal"; console.log("#"+key); // #inVal
    $("#"+key).unbind("click").click( function() { fnc(hl[key][i], direction); });    
    console.log(key); // inVal
}

（如果

var

缺失，您应该添加它-未声明的变量驻留在全局范围内。您不希望它们出现在全局范围内。在严格模式下，它们完全失败）（不确定

i

从何而来，但让我们假设它在看到之前在每个循环中生成）您可以使用立即调用的函数表达式（IIFE）要将值捕获到新范围内的新变量中（请记住，javascript使用函数范围）：

现在循环内的

key

和

i

指的是IIFE参数，而不是循环外声明的不断变化的变量

---

还要注意的是：如果以前的

i

值没有用于生成新值，那么

i

的计算可以移动到函数体中。如果使用它们，请注意对象键的顺序没有保证。

我没有听说过IIFE，但我相信这正是我需要的（如果它保存计算它时使用的值，而不是引用变量）。数组是否与对象具有相同的索引不确定性？请注意，

hl={}

，但

hl[key]=[]

。此外，我实际上没有使用

[I]

，只使用纯数字

[1]

，但文本后处理器认为我在插入链接并更改了每个链接[key][1]对于递增的值，这就是为什么您认为它是一个可更改的索引。（我更正了这个问题）而且现在我知道发生了什么，我已经更改了标题，以便其他人可以搜索它。

fnc = function(sort_by, direction) {
var qswitch = 1;

if (qswitch == 1) {
    key = "uid"; console.log("#"+key); // #uid
    $("#"+key).unbind("click").click( function() { fnc(hl[key][1], direction); });     
    console.log(key); // uid

    key = "inVal"; console.log("#"+key); // #inVal
    $("#"+key).unbind("click").click( function() { fnc(hl[key][1], direction); });    
    console.log(key); // inVal
}

if (qswitch == 2) {    
    $("#uid").unbind("click").click( function() { fnc(hl["uid"][1], direction); });     
    $("#inVal").unbind("click").click( function() { fnc(hl["inVal"][1], direction); }); 
}
}

key = "uid"; console.log("#"+key); // #uid
$("#"+key).unbind("click").click( function() { fnc(hl[key][1], direction); });     
console.log(key); // uid

key = "inVal"; console.log("#"+key); // #inVal
$("#"+key).unbind("click").click( function() { fnc(hl[key][2], direction); });    
console.log(key); // inVal

for(var key in hl){
    //compute i
    key = "inVal"; console.log("#"+key); // #inVal
    $("#"+key).unbind("click").click( function() { fnc(hl[key][i], direction); });    
    console.log(key); // inVal
}

for(var key in hl){
    // compute `i`
    (function(key, i){
        key = "inVal"; console.log("#"+key); // #inVal
        $("#"+key).unbind("click").click( function() { fnc(hl[key][i], direction); });    
        console.log(key); // inVal
    })(key,i)
}