マウスの動きが止まったときにイベントをトリガすることは可能ですか？

Question

私は、ユーザーがマウスをdiv要素上に置いたとき、およびマウスを要素上に動かしているときにトリガーされるイベントがあります。しかし、マウスの動きが止まったときにイベントをトリガする方法を見つけることができないようです。たとえば、私がチェックしているイベントは、ユーザーがdiv上にマウスを持っているかどうかをチェックし、そうであれば、別の要素が表示され、マウスの周りをたどります。ユーザーがdivを終了すると、表示された要素は非表示になります。それが今働く方法は、表示された要素をmoused-over divでマウスの周りに表示しているのですが、正確には私が望むものではありません。私はそれがマウスが動いているときに表示されないようにしたいが、マウスが動いていないときに表示する。

HTML

<div class="tooltip"><p></p></div> 
<div class="holder" id="1"></div> 
<div class="holder" id="2"></div> 

CSS

.holder{ 
    display: block; 
    float: left; 
    margin-bottom: 0.25%; 
    width: 100%; 
    height: 200px; 
    cursor: pointer; 
    border-top: 1px solid rgb(100, 100, 0); 
    border-bottom: 1px solid rgb(100, 100, 0); 
} 
.tooltip{ 
    position: absolute; 
    display: none; 
    width: 150px; 
    background-color: white; 
    z-index: 5; 
} 

JS

var holder = document.getElementsByClassName("holder"); 
var tooltip = document.getElementsByClassName("tooltip")[0]; 
for(var i = 0; i < holder.length; i++){ 
    var moving; 
    holder[i].onmouseover = function(ev){ 
     moving = false 
     tooltip.style.display = "block"; 
     tooltip.style.top = ev.clientY; 
     tooltip.style.left = ev.clientX; 
    } 
    holder[i].onmouseout = function(ev){ 
     moving = false 
     tooltip.style.display = "none"; 
     tooltip.style.top = ev.clientY; 
     tooltip.style.left = ev.clientX; 
    } 
    holder[i].onmousemove = function(ev){ 
     moving = true; 
    } 

    if(moving){ 
     tooltip.style.display = "none"; 
     tooltip.style.top = ev.clientY; 
     tooltip.style.left = ev.clientX; 
    } 
} 

Answer 1

あなたは、この使用 "のsetTimeout" 楽しみを行うことができますction。

マウスの移動を追跡すると、「mouseMoved」を現在のミリ秒に設定します。 そして、あなたはこのような何か：

setTimeout(function(){ 

    var now = new Date(); 
    var nowMillis = d.getMilliseconds(); 
    var timeDiff = nowMillis - mouseMoved; 
    if (timeDiff > 3000) 
     alert("mouse stopped moving for 3 seconds"); 
}, 3000); 

Answer 2

一つonmousemoveが呼び出されたときに単純なアプローチは、タイマーを設定することでしょうが。タイマーが切れると、隠れてしまいます。 onmousemoveが再び呼び出されると、タイマーのタイムアウトをリセットします。

誰かがマウスを動かすのをいつ止めるかはアプリケーションが判断する必要があります。技術的には、マウスの連続的な動きは、ピクセルごとのマウス移動イベントに変換されます。

onmousemoveが多く呼び出されるため、これを行うには少しスマートにする必要があります。そのため、おそらくこのような何か：あなたはきれいに移動して機能を再生むマウス中にタイムアウトの...のいくつかの種類を実装することができ

var mouseStartedMoving = false; 
var mouseMoved = false; 
const MINIMUM_MOUSE_MOVE_TIME = 100; 

setInterval(() => { 
    if(!mouseMoved && mouseStartedMoving) { 
     //Mouse stopped moving 
     //Do CSS change 
     mouseStartedMoving = false; 
    } 
    mouseMoved = false; 
}, MINIMUM_MOUSE_MOVE_TIME); 

holder[i].onmousemove = function(ev){ 
    mouseStartedMoving = true; 
    mouseMoved = true; 
}