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>...

clearTimeout表现得很奇怪

1 个答案: