javascript - clearTimeout 行为异常

Question

我正在处理一个模板文件，并且有 3 个列表项，当您滚动鼠标时会为每个加载隐藏的 div 突出显示文本，使其可见。在鼠标移出时，在 div 再次隐藏之前设置延迟。 clearTimeout 适用于用户是否在列出的项目之间移动，以便加载新选择的 div 并再次隐藏旧的 div。我的脚本可以正常工作，这就是我需要帮助的原因。当您从底部项目向上滚动项目时，clearTimeout 就像我想要的那样工作，但如果您从第一个项目向下滚动，它根本不会清除超时。

<script>function myClear1()
{
    clearTimeout(myFunction1, myFunction2, myFunction3);
    }
function myFunction1()
{
setTimeout(function(){document.getElementById('relatedproduct1').style.display = 'none';},500);
}
function myFunction2()
{
setTimeout(function(){document.getElementById('relatedproduct2').style.display = 'none';},500);
}
function myFunction3()
{
setTimeout(function(){document.getElementById('relatedproduct3').style.display = 'none';},500);
}
</script>

这些是脚本，下面我将从它在页面上使用的位置添加代码。

<form class="relatedcheckboxes">
<input type="checkbox" class="relatedcheckboxes">
<div style="display:inline;cursor:pointer; color:#00F; background-color:#FFF;"onmouseover="document.getElementById('relatedproduct1').style.display = 'block'; document.getElementById('selectedProductsGroup').style.display ='none'; myClear1()"onmouseout="myFunction1()">Product Number:</div> Product Name - Sale Price
<br>
<input type="checkbox" name="Product Name" value="" class="relatedcheckboxes">
<div style="display:inline; cursor:pointer; color:#00F; background-color:#FFF;"onmouseover="document.getElementById('relatedproduct2').style.display = 'block';document.getElementById('selectedProductsGroup').style.display ='none';myClear1()"onmouseout="myFunction2()">Product Number</div>: Product Name - Sale Price
<br />
<input type="checkbox" name="Product Name" value="" class="relatedcheckboxes">
<div style="display:inline; cursor:pointer; color:#00F; background-color:#FFF;"onmouseover="document.getElementById('relatedproduct3').style.display = 'block';  myClear1()"onmouseout="myFunction3()">Product Number</div>: Product Name - Sale Price
</form>

Answer 1

您必须将 setTimeout 的返回值传递给 clearInterval，而不是您的函数。例如:

var timer = setTimeout(func, 1000);
clearTimeout(timer);

---

以最少的更改调整您的代码将是这样的:

var timer1;
function myClear1(){
    clearTimeout(timer1);
}
function myFunction1() {
    return setTimeout(function(){
        document.getElementById('relatedproduct1').style.display = 'none';
    },500);
}

<div onmouseover="myClear1()" onmouseout="timer1=myFunction1()">...</div>...