バニラJavascript、jQueryを使用しないキャンセルによるmouseoutの遅延

Question

現在問題が発生しています。私はマウスの機能に応じて要素を隠して表示するためにCSSを使用しています。私の要素（ナビゲーション矢印）の1つは他のものに依存します。私は今、mouseleaveで2秒と数えることができるcancleableタイマー関数を必要とし、クラス属性を変更します。しかし、すぐにマウスオーバーをキャンセルするタイマーが必要です。あまりにも早く消えてほしくない。 以下、私がこれまでに試したコードです。私はそのsetIntervallのものの現在のタイミングにアクセスする方法を知らない。私はDate.now（）で実験しました。しかし、今私はオタクの一部が私を助けることができることを願っています。

ありがとうございます。

function hideElementOnMouseOut(el) 
{ 
    el.addEventListener("mouseleave", function(event) 
    { 
     mySlideAction = setInterval(function() 
     { 

     }, 1000); 
    } 
} 

Answer 1

あなたはそれが機能だ実行妨げることになる、mouseleave機能に間隔を初期化し、mouseover機能にこの間隔をクリアすることができます。

以下のスニペットを確認してください。

function hideElementOnMouseOut(el) 
 
{ 
 
    var interval; 
 
    
 
    el.addEventListener("mouseleave", function(event) 
 
    { 
 
     el.innerHTML = 'mouse out'; 
 
     interval = setInterval(function() 
 
     { 
 
      el.innerHTML = 'time out'; 
 
      el.className = 'out'; 
 
     }, 1000); 
 
    }); 
 
         
 
    el.addEventListener("mouseover", function(event) 
 
    { 
 
     el.innerHTML = 'mouse in'; 
 
     el.className = ''; 
 
     if(interval) {    
 
      clearInterval(interval); 
 
     } 
 
    }); 
 
    
 
} 
 
         
 
hideElementOnMouseOut(document.getElementById("element"));

#element { 
 
    display: block; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
} 
 

 
#element.out { 
 
    background: blue; 
 
}

<div id="element"></div>