Settimeout不起作用

Question

我已经看过一些有关类似问题的文章希望有人能使我保持直率。

我正在尝试创建一个函数，该函数将揭示指定的元素，然后再次将其隐藏起来。我在这里挣扎的区域是，在元素消失之前，我需要延迟。我从来没有在功能中真正使用过时间延迟，所以我有点挠头，试图使它起作用。

通过在线进行一些研究，似乎我可以直接插入标签上的" setimeout"属性，然后简单地包含隐藏功能和时间长度，但似乎无法正常工作。<<<<<<<<<<<<<</p>

标记第1部分（重要部分是＆lt; ect> tags）：

<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

您不是在2秒内将toggle_hidden传递给setTimeout，而是立即调用。

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

Answer 2

您正在立即调用函数toggle_hidden，而不是传递引用。

您可以使用bind将参数绑定到它。所以更改：

toggle_hidden('groupTwo')

to：

toggle_hidden.bind(null, 'groupTwo')

...等。