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

1. 有一个函数在完成时触发回调;
2. 我连续称这个function2或3次;
3. 只有最后一次调用的回调才能达到预期的效果;

以下描述和代码举例说明了真实情况。

我有三对div。 我需要切换每对中的一个div并在其对不再可见时更改剩余可见div的状态。

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

不幸的是，结果不是我预期的结果。 如果用户多次调用该函数，而不让该函数完成它的任务，则只有最后一个绑定的回调才能正常运行，其他的不会改变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，只需复制并粘贴到测试：

           div{ width:100px;height:300px;background-color:red;float:left; } .blue { background-color: blue !important; }    
 
 
 
 
 
        

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

Answer 1

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

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