JQuery - 当在一行中多次调用函数时，为什么只有最后一个调用的回调正确执行？ [英] JQuery - When calling a function multiple times in a row, why only the callback of the last call is executed properly?

问题描述

1. 有一个函数在完成后触发回调;


2. 我连续调用此函数2或3次;


3. 只有最后一次呼叫的回呼会执行预期的操作;

以下描述和代码说明了真实情况。 p>

我有三对div。我需要切换每对的一个div，并改变剩余的可见div的状态，当它的对不再可见。

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

不幸的是，结果是'我的预期。如果用户导致该函数被调用多次，而不让函数完成它的任务，只有最后绑定的回调将正常，其他人不会改变div的背景颜色或将不同步

$ b

这里是javascript：

  function toggleLayer（layerId，layerId2）{
 // element1是对的第一个div。一个被隐藏。 
 element1 = $（＃+ layerId）; 
 // element2是对的第二个div。当element1被隐藏时，这个背景颜色将被改变。 
 element2 = $（＃+ layerId2）; 
 
 //隐藏第一个div 
 element1.toggle（slow，function（）{
 //改变第二个div的颜色
 element2.toggleClass （blue）; 
}）; 
} 
  

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

 <！DOCTYPE html PUBLIC -  // W3C // DTD XHTML 1.0 Strict // ENhttp：//www.w3 .org / TR / xhtml1 / DTD / xhtml1-strict.dtd> 
< html xmlns =http://www.w3.org/1999/xhtml> 
< head> 
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/> 
< title> Test< / title> 
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js>< / script> 
< script type =text / javascript> 
<！ -  
 
 function toggleLayer（layerId，layerId2）{
 // element1是对的第一个div。一个被隐藏。 
 element1 = $（＃+ layerId）; 
 // element2是对的第二个div。当element1被隐藏时，这个背景颜色将被改变。 
 element2 = $（＃+ layerId2）; 
 
 //隐藏第一个div 
 element1.toggle（slow，function（）{
 //改变第二个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 =buttononclick =toggleLayer（'d1'，'d11'）; value =1style =clear：both; float：left; /> 
< input type =buttononclick =toggleLayer（'d2'，'d22'）; value =2style =clear：both; float：left; /> 
< input type =buttononclick =toggleLayer（'d3'，'d33'）; value =3style =clear：both; float：left; /> 
< input type =buttononclick =toggleLayer（'d1'，'d11'）; toggleLayer（'d2'，'d22'）; value =1 + 2style =clear：both; float：left; /> 
< input type =buttononclick =toggleLayer（'d1'，'d11'）; toggleLayer（'d2'，'d22'）; toggleLayer（'d3'，'d33'）; value =1 + 2 + 3style =clear：both; float：left; /> 
 
< / body> 
< / html> 
  

我希望回调完成它的任务，然后再尝试执行下一个调用，浏览器正在尝试同时执行它们。

解决方案

  element1 = $ ＃+ layerId）; 
 element2 = $（＃+ layerId2）; 
  

您忘记声明这些变量 var 所以，而不是函数本地他们是偶然的全局。当第二次调用该函数时，它将覆盖 element1 / element2 的第一个调用的值，发生 element2 不是你期望的。

1. There is a function that triggers a callback when finished;
2. I call this function 2 or 3 times consecutively;
3. Only the callback of the last call does what was expected;

The following description and code exemplifies the true scenario.

I have three pairs of divs. I need to toggle one div of each pair and change the state of the remaining visible divs when it's pair is no more visible.

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

Unfortunately, the result isn't the one I expected. If the user cause the function to be called more than one time, without letting the function finish it's task, only the last bound callback will behave properly, the other ones won't change the background color of the div or will be out of sync with the other div due to 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 test:

<!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 was expecting the callback to finish it's task before trying to execute the next call, but it seems the browser is trying to execute them all at the same time. Why does it happen and how do I do it properly?

解决方案

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

You forgot to declare these variables var, so instead of function-local they're accidental globals. When the function is called a second time, it overwrites the first call's values of element1/element2, so when the callback happens element2 is not what you expect.

这篇关于JQuery - 当在一行中多次调用函数时，为什么只有最后一个调用的回调正确执行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！