在JavaScript中展开/撤回闪烁错误
在JavaScript中展开/撤回闪烁错误
提问于 2013-11-02 13:46:47
面对这个错误，我在JavaScript中有一个脚本来处理mousedown事件上的操作。一个用于展开，另一个使用JavaScript收回元素。这是通过时间负载和增加的高度，直到高度符合内容或减少，直到div是隐藏的。当您单击“提取”时，等待其提取，然后单击“撤回所有工作正常”。当您快速单击“提取”，然后撤回(在提取结束之前)，就会出现问题。然后魔法虫就出现了。这些动作被困在提取和重新跟踪一个步骤，而且永远不会结束。我认为问题应该是循环变量(循环结束条件)。有人看到问题出在哪里了吗?怎么解决？
，这是代码：
如果您只是将代码复制到: something.html和extract_retract.js中，您可以看到我正在处理的问题。
Html文档：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{ padding:10px 20px; background:#D9ECFF; }
div.mydivs {
background: #97D6FB;
width: 500px;
height:0px;
overflow:hidden;
}
div.mydivs > p{ padding:4px 16px; background: #97D6FB;}
</style>
<script type="text/javascript" src="expand_retract.js"></script>
</head>
<body>
<h3>Programming Raw JavaScript expand() and retract() Animation Functions</h3>
<p>
<a href="#" onclick="return false" onmousedown="expand('div1')">Expand Box 1</a> |
<a href="#" onclick="return false" onmousedown="retract('div1')">Retract Box 1</a>
</p>
<div id="div1" class="mydivs">
<p>Box 1 Content</p>
<p>Box 1 Content</p>
<p>Box 1 Content</p>
</div>
<p>
<a href="#" onclick="return false" onmousedown="expand('div2')">Expand Box 2</a> |
<a href="#" onclick="return false" onmousedown="retract('div2')">Retract Box 2</a>
</p>
<div id="div2" class="mydivs">
<p>Box 2 Content</p>
<p>Box 2 Content</p>
<p>Box 2 Content</p>
<p>Box 2 Content</p>
<p>Box 2 Content</p>
</div>
</body>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument bez názvu</title>
</head>
<body>
</body>
</html>expand_retract.js代码如下：
function expand(element){
var target = document.getElementById(element);
var h = target.offsetHeight;
var sh = target.scrollHeight;
var loopTimer = setTimeout('expand(\''+element+'\')',8);
if(h < sh){
h += 5;
} else {
clearTimeout(loopTimer);
}
target.style.height = h+"px";
}
function retract(element){
var target = document.getElementById(element);
var h = target.offsetHeight;
var loopTimer = setTimeout('retract(\''+element+'\')',8);
if(h > 0){
h -= 5;
} else {
target.style.height = "0px";
clearTimeout(loopTimer);
}
target.style.height = h+"px";
}回答 1
Stack Overflow用户
发布于 2013-11-02 17:18:47
好密码。我提出这个建议，是为了解决这个问题：
var loopTimer = 0;
function expand(element) {
clearInterval(loopTimer);
loopTimer = setInterval('expandA(\''+element+'\')',8);
}
function expandA(element){
var target = document.getElementById(element);
var h = target.offsetHeight;
var sh = target.scrollHeight;
if(h < sh){
h += 5;
} else {
clearInterval(loopTimer);
}
target.style.height = h+"px";
}
function retract(element) {
clearInterval(loopTimer);
loopTimer = setInterval('retractA(\''+element+'\')',8);
}
function retractA(element){
var target = document.getElementById(element);
var h = target.offsetHeight;
if(h > 0){
h -= 5;
} else {
target.style.height = "0px";
clearInterval(loopTimer);
}
target.style.height = h+"px";
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19742549
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号