Javascript:鼠标悬停时间间隔为 2 秒时显示窗口

Question

我试图在鼠标悬停在图像上 2 秒或更长时间时显示一个窗口，当然如果用户没有悬停至少 2 秒我不希望显示该窗口。

下面是我使用的代码片段。由于代码现在是，无论用户将鼠标悬停在图像上多长时间，窗口都会在两秒后显示。我正在尝试获得类似于 Netflix 中的延迟悬停效果的东西。我确定我做错了。因此，在此先感谢您的帮助。

<img name="img4" onMouseOver="WindowDelay(this);" onmouseout="closeDetails();" 
        src="images/MyImage.jpg" height="240" width="166"/>

<script language="JavaScript" type="text/javascript">
       var countTime = 0;
       var windowTimer = null

       function WindowDelay(thatImg)
       {
            windowTimer = window.setInterval(function() {countT(thatImg);}, 1000);
       }   

       function countT(thatImg)
       {
            countTime++;

            if (countTime == 2)
            {
                openDetails(thatImg);
                clearInterval(windowTimer);
                countTime = 0;
            }

        }
</script> 

Answer 1

当鼠标经过元素时，使用setTimeout 在两秒后打开窗口。如果用户鼠标离开该元素，使用 clearTimeout 停止 future 的窗口打开。