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

如何解决jQuery-连续多次调用函数时，为什么只有最后一次调用的回调能正确执行？

| 有一个函数在完成时会触发回调。我连续两次或多次调用此函数；只有最后一次呼叫的回调才能实现预期的效果；以下描述和代码示例了真实的场景。我有三对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\',\'d22\');toggleLayer(\'d3\',\'d33\');\" value=\"1+2+3\" style=\"clear:both;float:left;\" />

</body>
</html>

我期望回调在尝试执行下一个调用之前完成其任务，但似乎浏览器正在尝试同时执行所有任务。为什么会发生，如何正确执行？

解决方法

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

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