Javascript：2秒のマウスオーバー時間間隔での表示ウィンドウ

Question

マウスが画像上に2秒以上ぶら下がっているときにウィンドウを表示しようとしていますが、ユーザーが少なくとも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を使用して2秒でウィンドウを開きます。ユーザーが要素からマウスを離した場合は、clearTimeoutを使用して将来のウィンドウのオープンを停止します。