在 JavaScript 中展开/收回闪烁错误

Expand/retract blinking bug in JavaScript

本文关键字：闪烁 错误 JavaScript      更新时间：2023-09-26

我遇到了这个错误，我在JavaScript中有一个脚本来处理mousedown事件的操作。 一个使用 JavaScript 进行扩展，一个执行缩回元素。它通过时间循环完成，并增加div 的高度，直到高度适合内容或降低直到隐藏div。当您单击提取时，请等到它提取，然后单击"撤回"一切正常。当您快速单击提取，然后收回（在提取结束之前）时，会出现此问题。然后神奇的错误出现了。这些操作卡在提取和重新跟踪一个步骤中，永远不会结束。我认为问题应该出在循环变量（循环结束条件）上。有没有人看到问题在哪里以及如何解决？代码如下：

如果你只是将代码复制到：某物中.html extract_retract.js你可以看到我正在处理的问题。

网页文档：

<!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";
}

很棒的代码。我建议这样做来解决这个问题：

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";
}
相关文章：