我遇到了这个错误,我在 javascript 中有一个脚本来处理 mousedonw 事件的操作。一个做扩展,一个做使用javascript收回元素。它是通过时间循环完成的,并增加 div 的高度直到高度适合内容或减少直到 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";
}