javascript - setTimeout 不起作用

Question

我看过一些关于类似问题的帖子，但我是一个 js 新手，所以我很难以一种明确我的代码需要如何更改的方式连接这些点，希望有人可以纠正我。

我正在尝试创建一个函数，该函数将在MouseOver 上显示指定元素，然后在MouseOut 上再次隐藏它。我在这里遇到的问题是我需要在元素消失之前有一个延迟。我以前从未在函数中真正使用过时间延迟，所以我有点摸不着头脑试图让它发挥作用。

通过一些在线研究，似乎我可以将“setTimeout”直接插入标签上的 onmouseout 属性，然后简单地包含隐藏功能和时间长度，但这似乎不起作用。

标记第 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)"