Geek asks and answers

JQuery - When calling a function several times in a row, why only the callback of the last call is executed correctly?

  • There is a function that causes the callback to end;
  • I call this function 2 or 3 times in a row;
  • Only the callback of the last call does what was expected;

The following description and code illustrates the true scenario.

I have three pairs of divs. I need to switch one div of each pair and change the state of the remaining visible divs when the pair is no longer visible.

Then I created a function to hide the div and change the background color of another. I did this because I would like to call this function whenever the user clicked a button to show a description and other non-essential items.

Unfortunately, the result is not what I expected. If the user forces the function to be called more than once, not allowing the function to complete its task, only the last linked callback will behave correctly, others will not change the background color of the div or will not be synchronized with another div due to the delay.

Here is the 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");
    });
}

Here is the full HTML, just copy and paste to verify:

<!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>

I expected callback to complete the task before trying to make the next call, but it seems like the browser is trying to complete them all at once. Why is this happening and how am I doing it right?

+3
source share
1 answer
    element1 = $("#"+layerId);
    element2 = $("#"+layerId2);

var, -local . , element1/element2, , element2, .

+5

More articles:


All Articles