HTML/Javascript - 设置超时问题

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>

你好，我已经做了一些搜索，但没有令人满意的解决问题..

我想要一些解决方案：

The onmouseover event is executed, and 1 second later, the onmouseout event is also called and setTime that was executed by the over function continues to count, reproducing a visual bug.

有什么方法可以在调用 onmouseout 事件时中断 onmouseover 事件调用的 setTimer 吗？

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 - 设置超时问题

HTML/Javascript - setTimeout issues

html

javascript

settimeout