“setTimeout”javascript 函数不起作用的代码有什么问题？
对于我的网站，我想使用显示一些内容mouseover，并且即使在采取操作时也希望显示内容几秒钟，mouseout因为内容包含一些有用的链接。为此，我使用setTimeoutjavascript 函数将函数延迟mouseout10 秒。但不幸的是它不起作用。
<body>
<img src="images/1.jpg" alt="some_text" id="test1" style="height: 450px; width: 300px;">
<img src="images/1.jpg" id="test2" alt="some_text" style="height: 450px; width: 300px;">
<script>
document.getElementById("test1").addEventListener("mouseover", mouseOver);
document.getElementById("test1").addEventListener("mouseout", mouseOut);
function mouseOver() {
document.getElementById("test2").style.opacity = "0";
document.getElementById("test2").style.visibility = "hidden";
}
function mouseOut() {
document.getElementById("test2").style.opacity = "1";
document.getElementById("test2").style.visibility = "visible";
}
setTimeout(mouseOut, 10000);
</script>
</body>
沧海一幻觉3回答
-
大话西游666
您应该调用setTimeout内部事件处理程序，如下所示：document.getElementById("test1").addEventListener("mouseout", mouseOut);function mouseOut() { setTimeout(mouseOut2, 10000);}function mouseOut2() { document.getElementById("test2").style.opacity = "1"; document.getElementById("test2").style.visibility = "visible";} -
蛊毒传说
SetTimeout 应该在 mouseOut 里面 document.getElementById("test1").addEventListener("mouseover", mouseOver); document.getElementById("test1").addEventListener("mouseout", mouseOut); function mouseOver() { document.getElementById("test2").style.opacity = "0"; document.getElementById("test2").style.visibility = "hidden"; } function mouseOut() { setTimeout(()=>{ document.getElementById("test2").style.opacity = "1"; document.getElementById("test2").style.visibility = "visible"; }, 6000); }<body> <img src="images/1.jpg" alt="some_text" id="test1" style="height: 450px; width: 300px;"> <img src="images/1.jpg" id="test2" alt="some_text" style="height: 450px; width: 300px;"></body> -
一只萌萌小番薯
由于您绑定mouseOut为相应事件的事件处理程序，它仍将被执行。您setTimeout添加的只会再调用mouseOut一次，与鼠标事件无关。如果您想延迟处理鼠标移开事件时发生的事情，请执行以下操作： function mouseOut() { setTimeout(function () { document.getElementById("test2").style.opacity = "1"; document.getElementById("test2").style.visibility = "visible"; }, 10000); }但是请注意，这可能不是那么用户友好。用户可能希望该行为与他们的鼠标移动有关，但现在连接丢失了——肯定有 10 秒的超时。
随时随地看视频慕课网APP
相关分类
JavaScript