HTML / Javascript - проблемы setTimeout - PullRequest
Новая
       6

HTML / Javascript - проблемы setTimeout

0 голосов
/ 07 ноября 2018

Мой 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 выполняется, а через 1 секунду onmouseout событие также вызывается и setTime, который был выполнен over Функция продолжает считать, воспроизводя визуальную ошибку.

Есть ли способ прервать setTimer, вызванный событием onmouseover, когда вызывается событие onmouseout?

1 Ответ

0 голосов
/ 07 ноября 2018

Использование 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

...