个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
以下描述和代码举例说明了真实场景。
我有三对 div。我需要切换每对中的一个 div，并在其对不再可见时更改剩余可见 div 的状态。
然后，我做了一个功能来隐藏一个div并改变另一个div的背景颜色。我这样做是因为我想在用户单击按钮以显示描述和其他非必要项目时调用此函数。
不幸的是，结果不是我所期望的。如果用户多次调用该函数，而没有让该函数完成其任务，则只有最后一次绑定(bind)的回调会正常运行，其他回调不会更改 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>
我期待回调在尝试执行下一个调用之前完成它的任务，但浏览器似乎试图同时执行它们。为什么会发生这种情况，我该如何正确处理？
最佳答案
element1 = $("#"+layerId);
element2 = $("#"+layerId2);
您忘记声明这些变量 var，因此它们不是函数局部变量，而是偶然的全局变量。第二次调用该函数时，它会覆盖第一次调用的 element1/element2 的值，所以当回调发生时 element2 不是什么你期待的。
关于javascript - JQuery - 连续多次调用一个函数时，为什么只有最后一次调用的回调正确执行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6130249/
26
4
0
我正在研究 learnyounode 的 HTTP 客户端作业。 我想知道为什么控制台记录来自response.on(“end”，callback)的数据仅输出预期输出的最后一部分，而控制台记录来自r
我正在尝试创建一个对象列表(在我的示例中为 List)，我在其中使用 json 将对象添加到此列表，但该列表仍为空。这是我的代码: public List readCardsFromJson() {
我有一个 JavaScript 函数“print_something”，它在大约 300 个 jsp 帮助页面中实现。我发现这个“print_something”函数必须被纠正。所以我正在寻找一个不更
有 2 个 HTML 下拉列表，一个用于 12 小时时间，一个用于每小时 5 分钟的时间间隔。 .. 1 .. 12 .. 0 .. 55 .. 一直在尝试使用 if/
我有一个 A 类，我打算在它与设备驱动程序交互时将其放入共享库中。 我有一个 B 类，将来可能是 C、D、E...，它将使用共享库中的 A 类。 我想要在类 A 中设置回调函数的功能，以便当特定事件发
我需要能够在处理完 Observable.next() 之后执行回调。 我有一个组件“A”，它有一个主题使用 Subject.next() 发送通知。我有一个组件“B”，它订阅了 Subject.as
我有一张在顶部和底部单元格下方带有阴影的表格(此处使用 Matt Gallagher 的解决方案:http://cocoawithlove.com/2009/08/adding-shadow-effe
有人可以向我解释一下为什么这段代码有效 renderSquare(i) { return ( this.handleClick(i)} /> ); } 但
我可以让两个不同的客户端监听相同的 WCF 回调并让它们都接收相同的数据而不必进行两次处理吗？ 最佳答案 不是真的 - 至少不是直接的。你所描述的听起来很像发布/订阅模式。 WCF 服务基本上在任何给
我是 SignalR 的新手，如果这个问题太明显，我深表歉意，但我在文档中找不到任何答案。 这是我的代码。 /*1*/ actions.client.doActionA = function (r
我有这个应用程序，您可以在其中输入一些文本并按下一个按钮，将此文本添加到自定义小部件中。这是代码: import 'dart:core'; import 'package:flutter/materi
我读到当您还想使用模型回调时不能使用 Keras 进行交叉验证，但是 this post表明这毕竟是可能的。但是，我很难将其纳入我的上下文。 为了更详细地探讨这个问题，我正在关注 machinelea
我尝试在重力表单中提交表单失败后运行一些 jQuery 代码，也就是验证发现错误时。 我尝试使用 Ajax:complete 回调，但它根本不触发。 我尝试运行的代码基本上将监听器添加到选择下拉列表中
我有一个 $image，我 .fadeIn 和 .fadeOut，然后 .remove .fadeOut 完成。这是我的代码: $image .fadeIn() .fadeOut(func
我正在处理一个自定义文件路径类，它应该始终执行一个函数 写入相应的系统文件及其文件对象后 关闭。该函数将文件路径的内容上传到远程位置。 我希望上传功能完全在用户的幕后发生 透视，即用户可以像使用其他任
这里是 javascript 新手，所以回调在我的大脑中仍然有点不确定。 我想做的是:给定一个“菜单”，它是一个 objectId 数组，查询与该 objectId 相对应的每个 foodItem，获
我正在学习回调，我编写了以下代码: var http = require('http'); var str = ""; var count = 2; function jugglingAsync(ca
这是我的困境，我有一系列被调用的函数，我正在使用回调函数在它们完成时执行函数。回调返回一个值并且效果也很好，我的问题是当我向回调添加参数时我无法再访问返回值。这是一个有效的例子: function m
This question already has answers here: Explanation of function pointers (4个答案) 上个月关闭。 如何将函数指针作为参数传递
我无法让以下代码工作。假设 ajax 调用有效，并且 msg['username'] 预设为 'john'。我想我对如何将变量传递给回调感到困惑。编辑:我认为我的主要困惑是如何从 Ajax 中获取“m
我是一名优秀的程序员,十分优秀！