JQuery - 连续多次调用函数时，为什么只有最后一次调用的回调正确执行？答案

【问题标题】：JQuery - When calling a function multiple times in a row, why only the callback of the last call is executed properly?JQuery - 连续多次调用函数时，为什么只有最后一次调用的回调正确执行？
【发布时间】：2011-05-25 20:08:07
【问题描述】：

有一个函数在完成时触发回调；
我连续调用此函数 2 或 3 次；
只有最后一次调用的回调才符合预期；

以下描述和代码举例说明了真实场景。

我有三对 div。我需要切换每对中的一个 div，并在其对不再可见时更改剩余可见 div 的状态。

然后，我做了一个函数来隐藏一个 div 并改变另一个 div 的背景颜色。我这样做是因为我想在用户单击按钮以显示描述和其他非必要项目时调用此函数。

很遗憾，结果不是我所期望的。如果用户导致函数被多次调用，而没有让函数完成它的任务，只有最后一个绑定的回调会正常运行，其他的不会改变 div 的背景颜色或者会不同步由于延迟而与其他 div 保持一致。

这里是javascript：

function toggleLayer(layerId,layerId2) {
    //element1 is the first div of the pair. The one to be hidden.
    element1 = $("#"+layerId);
    //element2 is the second div of the pair. The background-color of this one will be changed when the element1 is hidden.
    element2 = $("#"+layerId2);

    //Hiding the first div
    element1.toggle("slow",function() {
        //Changing the color of the second div
        element2.toggleClass("blue");
    });
}

这里是完整的 HTML，复制粘贴即可测试：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
<!--

    function toggleLayer(layerId,layerId2) {
        //element1 is the first div of the pair. The one to be hidden.
        element1 = $("#"+layerId);
        //element2 is the second div of the pair. The background-color of this one will be changed when the element1 is hidden.
        element2 = $("#"+layerId2);

        //Hiding the first div
        element1.toggle("slow",function() {
            //Changing the color of the second div
            element2.toggleClass("blue");
        });
    }

-->
</script>
<style type="text/css">
    div{
        width:100px;height:300px;background-color:red;float:left;
    }
    .blue {
        background-color: blue !important;
    }
</style>
</head>
<body>

<div id="d1"></div>
<div id="d11"></div>
<div id="d2"></div>
<div id="d22"></div>
<div id="d3"></div>
<div id="d33"></div>



<input type="button" onclick="toggleLayer('d1','d11');" value="1" style="clear:both;float:left;" />
<input type="button" onclick="toggleLayer('d2','d22');" value="2" style="clear:both;float:left;" />
<input type="button" onclick="toggleLayer('d3','d33');" value="3" style="clear:both;float:left;" />
<input type="button" onclick="toggleLayer('d1','d11');toggleLayer('d2','d22');" value="1+2" style="clear:both;float:left;" />
<input type="button" onclick="toggleLayer('d1','d11');toggleLayer('d2','d22');toggleLayer('d3','d33');" value="1+2+3" style="clear:both;float:left;" />

</body>
</html>

我期待回调在尝试执行下一个调用之前完成它的任务，但似乎浏览器正试图同时执行它们。为什么会发生这种情况，我该如何正确处理？

【问题讨论】：

为我工作：jsfiddle.net/5XmAe

标签： javascript jquery callback simultaneous-calls

【解决方案1】：

    element1 = $("#"+layerId);
    element2 = $("#"+layerId2);

您忘记声明这些变量 var，因此它们不是函数局部变量，而是偶然的全局变量。第二次调用该函数时，它会覆盖第一次调用的值element1/element2，因此当回调发生时element2 不是您所期望的。

【讨论】：

它们是参数：function toggleLayer(layerId,layerId2)
哦，我明白了！非常感谢你！我完全忘记了范围，因为我确信它与 JQuery 相关。再次感谢！
@Scott：element1 和 element2 是偶然的全局变量。