setTimeoutが動作しない

Question

私は同様の問題に関していくつかの記事を見たことがありますが、ちょっとした初心者ですので、コードを変更する必要があることを明確にする方法でドットを接続するのに問題があります。まっすぐ。

私は指定された要素onMouseOverを表示し、それを再びonMouseOutに隠す関数を作成しようとしています。私がここで苦労しているところは、要素が消えるまでに遅れが必要なことです。私は実際に関数内で時間遅延を使用したことはありませんので、私は頭を少し傷つけて、これを動作させようとしています。

オンラインのリサーチでは、「setTimeout」をタグのonmouseout属性に直接接続して、単純にhide関数と時間の長さを含めることができるように見えましたが、動作していないようです。

マークアップ部分1（重要な部分は< \ RECT>タグである）：

<svg height="400" width="580" xmlns="http://www.w3.org/2000/svg"> 
<g> 
<title></title> 
<rect fill="#fff" height="402" id="canvas_background" width="582" x="-1" y="-1"></rect> 
<g display="none" height="100%" id="canvasGrid" overflow="visible" width="100%" x="0" y="0"> <rect fill="url(#gridpattern)" height="100%" stroke-width="0" width="100%" x="0" y="0"></rect> </g> </g> <g> 
<title></title> 

<rect fill="#fff" height="66" id="svg_1" onmouseover="toggle_visibility('groupOne')" onmouseout="setTimeout(toggle_hidden('groupOne'), 2000)" stroke="#000" stroke-width="1.5" width="126" x="74.5" y="73.299999"></rect> 

<rect fill="#fff" height="84" id="svg_2" onmouseover="toggle_visibility('groupTwo')" onmouseout="setTimeout(toggle_hidden('groupTwo'), 2000)" stroke="#000" stroke-width="1.5" width="124" x="76.5" y="173.299999"></rect> 

<rect fill="#fff" height="42" id="svg_3" onmouseover="toggle_visibility('groupThree')" onmouseout="setTimeout(toggle_hidden('groupThree'), 2000)" stroke="#000" stroke-width="1.5" width="68" x="240.5" y="43.299999"></rect> 

<rect fill="#fff" height="48" id="svg_4" onmouseover="toggle_visibility('groupFour')" onmouseout="setTimeout(toggle_hidden('groupFour'), 2000)" stroke="#000" stroke-width="1.5" width="92" x="348.5" y="41.299999"></rect> 

<rect fill="#fff" height="138" id="svg_5" onmouseover="toggle_visibility('groupFive')" onmouseout="setTimeout(toggle_hidden('groupFive'), 2000)" stroke="#000" stroke-width="1.5" width="72" x="242.5" y="113.299999"></rect> 

<rect fill="#fff" height="66" id="svg_6" onmouseover="toggle_visibility('groupSix')" onmouseout="setTimeout(toggle_hidden('groupSix'), 2000)" stroke="#000" stroke-width="1.5" width="84" x="372.5" y="193.299999"></rect> </g> 
</svg> 

マークアップ部2（隠された又は図示されているアイテム）：

<ul class="hide" id="groupOne"> 
    <li>List item 1</li> 
    <li>List item 2</li> 
    <li>List item 3</li> 
</ul> 

<ul class="hide" id="groupTwo"> 
    <li>List item 4</li> 
    <li>List item 5</li> 
    <li>List item 6</li> 
</ul> 

<ul class="hide" id="groupThree"> 
    <li>List item 7</li> 
    <li>List item 8</li> 
    <li>List item 9</li> 
</ul> 

<ul class="hide" id="groupFour"> 
    <li>List item 10</li> 
    <li>List item 11</li> 
    <li>List item 12</li> 
</ul> 

<ul class="hide" id="groupFive"> 
    <li>List item 13</li> 
    <li>List item 14</li> 
    <li>List item 15</li> 
</ul> 

<ul class="hide" id="groupSix"> 
    <li>List item 16</li> 
    <li>List item 17</li> 
    <li>List item 18</li> 
</ul> 

JS ：

<script type="text/javascript"> 
    function toggle_visibility(id) { 
     var e = document.getElementById(id); 
     if (e.classList.contains('hide')) { 
      e.classList.add('show'); 
      e.classList.remove('hide'); 
     } else { 
      e.classList.add('hide'); 
     } 

    } 

    function toggle_hidden(id) { 
     var e = document.getElementById(id); 
     if (e.classList.contains('show')) { 
      e.classList.add('hide'); 
     }    
    } 
</script> 

私はこれに取り組むべきであるか上の任意の建設的なアドバイスを事前に感謝します。

Answer 1

toggle_hidden〜setTimeoutを2秒間で呼び出すのではなく、すぐに呼び出します。

onmouseout="setTimeout(function(){ toggle_hidden('groupOne'); }, 2000)" 

Answer 2

参照を渡す代わりに、関数toggle_hiddenをすぐに呼び出しています。

bindを使用して、引数をバインドできます。だから、変更：

toggle_hidden('groupTwo') 

へ：

toggle_hidden.bind(null, 'groupTwo') 

...など。