setTimeout不起作用

Question

我看過幾篇有關類似問題的文章，但是對JS新手有些了解，因此很難以一種清晰的方式連接點，以使我的代碼需要更改，希望有人能使我直截了當。

我正在嘗試創建一個函數，該函數將顯示指定的元素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')

...等等。