Question

我的index.html：

<!DOCTYPE html> 
<html> 
<head>
<meta charset="UTF-8">
</head>
<body>

<div id="test-1">
    <img id="test" src="thumb1.png" width="15%" onmouseover="over(this)" 
        onmouseout="out(this)">
</div>

<script>
    function over(x) {
        document.getElementById('test').setAttribute('src','thumb.webp');
        document.getElementById('test').setAttribute('width','15%');
        var Delay;
        Delay = setTimeout(thumb2, 4000);
    }

    function out(x) {
        document.getElementById('test').setAttribute('src','thumb1.png');
    }

    function thumb2(){
        document.getElementById('test').setAttribute('src','thumb2.png');
    }
</script>

</body> 
</html>

您好，我已经进行了一些搜索，但不能令人满意地解决该问题。

我想要一些解决方案：

执行onmouseover事件，一秒钟后， onmouseout事件也会被调用，setTime由事件执行 over函数继续计数，再现了视觉错误。

在调用setTimer事件时，是否有任何方法可以中断onmouseover事件调用的onmouseout？

Answer 1

使用clearTimeout

<script>
    var Delay;
    function over(x) {
        document.getElementById('test').setAttribute('src','thumb.webp');
        document.getElementById('test').setAttribute('width','15%');
        Delay = setTimeout(thumb2, 4000);
    }

    function out(x) {
        clearTimeout(Delay);
        document.getElementById('test').setAttribute('src','thumb1.png');
    }

    function thumb2(){
        document.getElementById('test').setAttribute('src','thumb2.png');
    }
</script>

您可以在w3wchools.com

上看到一个有效的示例

HTML / Javascript-setTimeout问题

1 个答案: