Gibt es eine Möglichkeit, onmouseover nach ein paar Sekunden auszulösen, wenn man mit der Maus darüber fährt?

Question

Ich möchte sicherstellen, dass der Benutzer etwas aufpoppen lassen möchte, wenn er mit der Maus über ein Div fährt. Ich möchte nicht, dass der Benutzer versehentlich etwas auslöst, um ohne Absicht aufzutauchen. setTimeout funktioniert nicht, denn selbst wenn es sehr kurz ist, erscheint das Pop-up trotzdem, es wird nur verzögert. Was ich will, ist der Benutzer zu Maus über etwas für 1sec für ein Pop-up anzuzeigen.

**Aktualisierung:

Wenn ich das tue:

<div onmouseover="myTimer=setTimeout('display(this)', 5000);">

der Timer funktioniert und wird nach 5 Sekunden angezeigt, aber this wird nicht übergeben und ich kann das Element nicht über $(element).next() , usw. Wenn ich das tue:

 <div onmouseover="myTimer=setTimeout(display(this), 5000);">

der Timer funktioniert nicht. Was ist falsch, wie kann ich den Timer und die this verabschiedet werden?

Gracias.

**update2: die this Problem von aquí Staaten: "Code, der von setTimeout() ausgeführt wird, wird in einem anderen Ausführungskontext ausgeführt als die Funktion, von der er aufgerufen wurde. Folglich wird das this-Schlüsselwort für die aufgerufene Funktion auf das Fenster- (oder globale) Objekt gesetzt, es ist nicht dasselbe wie der this-Wert für die Funktion, die setTimeout aufgerufen hat."

Ich habe die Antwort auf diese Frage gefunden aquí wo Sie "einen Verweis auf den Kontext, in dem die Funktion setTimeout aufgerufen wird, speichern" müssen

Answer 1

Das sollte für Sie funktionieren:

<div id="example">Hover me</div>
<script type="text/javascript">
    (function(){
        var timer;
        var el = document.getElementById('example');

        el.onmouseover = function(){
            timer = setTimeout(function(){
                display(el);
                // If display takes no arguments and uses the "this" keyword inside it
                // Use display.call(el); instead
            }, 1000);
        }

        el.onmouseout = function(){
            clearTimeout(timer);
        }
    })();
</script>

Beispiel auf JSFiddle

Answer 2

Ich bin mir ziemlich sicher, dass dies funktionieren sollte:

onmouseover="myTimer=setTimeout(yourFunctionName, 1000);"

Sie müssen auch hinzufügen:

onmouseout="clearTimeout(myTimer);"

Answer 3

Beim Überfahren mit der Maus können Sie einen Timer starten. Bei Mouse-Out wird der Timer auf 0 zurückgesetzt. Wenn der Timer 1s erreicht, können Sie Ihr Ereignis auslösen und den Timer auf 0 zurücksetzen.

Answer 4

Später stieß ich auch auf das jQuery-Plug-in hoverIntent, das es wert ist, ausprobiert zu werden.