3
  1. 有一个函数在完成时触发回调；
  2. 我连续调用此函数 2 或 3 次；
  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>

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

4

1 回答 1

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

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

于 2011-05-25T20:16:25.807 回答