我有一个完整依赖
JavaScript和Ajax的三步流程来加载数据并使流程从一个步骤动画到下一个步骤.更复杂的是,步骤之间的转换(向前和向后)是动画的:-(.当用户通过进程锚点的进度显示当前步骤和前面的步骤时.如果他们点击上一步骤,则将它们带回上一步.
现在,如果从步骤1开始,整个过程(向前和向后)都能正常工作,但如果直接跳到步骤3,则步骤1和步骤2的锚点也会执行与步骤3相同的操作.
这是代码的一部分,循环遍历用户所在的当前步骤的所有步骤,并依次显示每个锚点并为click事件分配适当的函数：
for (var i = 0; i < profile.current + 1; i++) {
if ($('step_anchor_' + i).innerHTML.empty()) {
var action = profile.steps[i].action;
var dao_id = profile.steps[i].dao_id;
$('step_anchor_' + i).innerHTML = profile.steps[i].anchor;
$('step_anchor_' + i).observe('click',function(){
pm.loadData(action,dao_id,true);
});
Effect.Appear('step_anchor_' + i,{
duration: 1,delay: (down_delay++)
});
}
}
我知道问题在于传递action和dao_id参数的方式.我也尝试传递profile.steps [i] .action和profile.steps [i] .dao_id,但在这种情况下,无论是profile还是i或至少我的范围.
我该怎么做才能为每个步骤正确分配action和dao_id的参数？ (如果它有任何区别我们正在使用Prototype和Scriptaculous)
解决方法
你的闭包范围链正在引发你的问题.通过内联声明处理函数,您已经创建了一个闭包.显然你这样做是为了利用循环.
但是,由于您已经创建了一个闭包,因此您将通过闭包范围规则进行游戏.这些规则规定,只要闭包存在,父函数中的局部变量就会保持活动状态并且可用.
你试图通过然后使用“action”和“dao_id”到你的闭包,但你在这里传递引用,而不是值.因此,当调用闭包(处理程序)时,它们使用上次分配引用的值.在您的情况下,步骤3处理程序.
关闭范围规则很容易混淆,但是即使循环块已经完成执行,“action”和“dao_id”仍然存在这一事实也可能会使您感到困惑.好吧,在JavaScript中没有块范围这样的东西.声明变量后,它将一直可用,直到函数结束或直到删除为止.以先到者为准.
总而言之,你需要打破范围链.这有两种方法：
试试这个：
for (var i = 0; i < profile.current + 1; i++) {
if ($('step_anchor_' + i).innerHTML.empty()) {
var action = profile.steps[i].action;
var dao_id = profile.steps[i].dao_id;
$('step_anchor_' + i).innerHTML = profile.steps[i].anchor;
$('step_anchor_' + i).observe('click',function(a,b){
return function(){pm.loadData(a,b,true)};
}(action,dao_id));
Effect.Appear('step_anchor_' + i,{
duration: 1,delay: (down_delay++)
});
}
}
或这个：
function createHandler(action,dao_id) {
return function(){pm.loadData(action,true);};
}
/* snip - inside some other function */
for (var i = 0; i < profile.current + 1; i++) {
if ($('step_anchor_' + i).innerHTML.empty()) {
var action = profile.steps[i].action;
var dao_id = profile.steps[i].dao_id;
$('step_anchor_' + i).innerHTML = profile.steps[i].anchor;
$('step_anchor_' + i).observe('click',createHandler(action,dao_id));
Effect.Appear('step_anchor_' + i,delay: (down_delay++)
});
}
}
