0

私はこのバグに直面しており、mousedonw イベントでアクションを処理する JavaScript のスクリプトを持っています。1 つは javascript を使用して要素を展開し、もう 1 つは要素を撤回します。これはタイムループによって行われ、高さがコンテンツに収まるまで div の高さを増やすか、div が非表示になるまで減らします。抽出をクリックすると、抽出されるまで待ってから、すべての作業を元に戻すをクリックします。この問題は、[抽出] をクリックしてから (抽出が終了する前に) 取り消すと発生します。すると魔法の虫が現れます。アクションは、1 つのステップの抽出と再追跡でスタックし、決して終了しません。問題はループ変数（ループ終了条件）にあるはずだと思いました。問題のrlyがどこにあり、どのように修正できるかを誰かが見ていますか? どうも。
コードは次のとおりです。
コードを some.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";
}
4

1 に答える 1

0

素晴らしいコード。この問題を解決するためにこれを提案します：

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";
}
于 2013-11-02T17:18:47.767 に答える