インラインonmouseoverに遅延を追加する

Question

私はあなたがGoogleマップ上の項目を表示することができるページに取り組んでいます。ビジネスアドレスにカーソルを合わせると、地図がその場所に移動し、インフォウィンドウが開きます。それは完璧に動作しますが、onmouseoverイベントはインラインです。なぜなら、onmouseoverには異なるidがあり、これはphp変数によって設定されるからです。

問題は、onmouseoverイベントに遅延を追加する方法を見つける必要があるため、ユーザーはonmouseoverがトリガーされるまで数秒間アイテムにカーソルを合わせる必要があります。

いくつかの解決策を見てきましたが、遅延を追加するものはありません。

のonmouseoverリンクは

<a onmouseover="javascript:triggerClick(<?php echo $id; ?>)" href="<?php echo $listingurl; ?>"> 

任意の提案をいただければ幸いです...このようになります。

Answer 1

あなた自身で作成することができます。 onmouseoverイベントをonmouseenterとonmouseleaveに分割します。これにより、onmouseenterイベントでタイムアウトを開始し、onmouseleaveイベントでタイムアウトをクリアすることができます。時間がなくなる前に、ユーザーが離れた場合、あなたはあなたの行動の前に1秒のタイムアウトを持つことになります

function onEnter(){ 
    timeout = setTimeout(function(){ 
    //your code 
    }, 1000); 
} 

function onLeave(){ 
    //in case the user leaves early stop the excution of your code 
    clearTimeout(timeout); 
} 

この方法では、トリガとそれがトリガされません。

EDIT

これは実用的なユースケースhttps://codepen.io/anon/pen/YEMpBx

<a onmouseover="triggerClick(<?php echo $id; ?>, this)">Foo</a> 

function triggerClick(id, element){ 
    var timeout = setTimeout(function(){ 
    //your code here 
    }, 1000); 

    element.addEventListener('mouseleave', function triggerLeave(event){ 
    clearTimeout(timeout); 
    element.removeEventListener('mouseleave', triggerLeave); 
    }); 
} 

Answer 2

OKですが、私はこれが今のように見え、それがどのような作品です...それはこのスレッドに感謝を働かせました。.. 。

<a onmouseover="setTimeout(function(){ javascript:triggerClick(<?php echo $id; ?>); }, 1000);" href="<?php echo $listingurl; ?>"> 

おかげ