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

Question

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

Joh*_*fee 3 javascript jquery callback simultaneous-calls

有一个函数在完成时触发回调;
我连续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");
    });
}

Run Code Online (Sandbox Code Playgroud)

这是完整的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>

Run Code Online (Sandbox Code Playgroud)

在尝试执行下一个调用之前,我期待回调完成它的任务,但似乎浏览器正在尝试同时执行它们.为什么会这样,我该怎么做呢？

Answer 1

bob*_*nce 5

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

Run Code Online (Sandbox Code Playgroud)

你忘了声明这些变量var,所以它们不是函数局部的,而是意外的全局变量.当该功能被称为第二次,它覆盖的第一个电话的值element1/ element2,所以当发生回调element2是不是你所期望的.

归档时间：	15 年，2 月前
查看次数：	2552 次
最近记录：	15 年，2 月前