Что не так с кодом, в котором не работает функция setTimeout javascript?

#javascript #html

#javascript #HTML

Вопрос:

Для моего сайта я хочу отобразить некоторый контент с помощью mouseover и хочу отображать контент еще несколько секунд, даже когда mouseout выполняется действие, потому что контент содержит несколько полезных ссылок. Для этого я использовал setTimeout функцию javascript для задержки mouseout функции на 10 секунд. Но, к сожалению, это не работает.

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

Ответ №1:

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>

Ответ №2:

Вы должны вызвать 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";
}

Ответ №3:

Поскольку вы привязаны mouseOut как обработчик события для соответствующего события, оно все равно будет выполнено. Добавленное setTimeout вами просто вызовет mouseOut еще один раз и не связано с событием мыши.

Если вы хотите отложить то, что происходит при обработке события mouse out, выполните:

         function mouseOut() {
            setTimeout(function () {
                document.getElementById("test2").style.opacity = "1";
                document.getElementById("test2").style.visibility = "visible";
            }, 10000);
        }

Однако обратите внимание, что это может быть не совсем удобно для пользователя. Пользователи могут ожидать, что поведение связано с их движениями мыши, но теперь соединение потеряно — конечно, с таймаутом в 10 секунд.

1. Спасибо. 10s был просто примером. Моя цель — отложить выполнение mouseout функции не более чем на 1 секунду позже, чтобы полезные ссылки могли быть видны пользователям.