die Arbeits $ (this) für eine SetTimeout Schließung = nicht als

Question

I setTimeoutmouseout in einer Schaltfläche verwenden möchten erwartet und beziehen sich auf $(this) (die Schaltfläche) aus dem setTimeout. Ich benutze that = $(this), dann benutze that in der setTimeout aber es funktioniert nicht ganz wie erwartet.

Wenn Sie den Mauszeiger über die einzelnen Links bewegen, funktioniert das langsam (1,2,3). Aber wenn du es schnell unter 100ms machst, bekomme ich alle 3s (3,3,3).

Meine Vermutung ist die Schließung funktioniert nicht und die that var wird überschrieben, aber ich kann einfach nicht herausfinden, warum.

Können Sie erklären, was passiert?

$("nav a") 
 
    .mouseenter(function() { 
 
    // 
 
    }) 
 
    .mouseout(function(event) { 
 
    \t that = $(this); 
 
    \t setTimeout(function(){ 
 
     \t \t console.log(that.data('uid')); 
 
     }, 100); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a href="" data-uid="1">One</a></li> 
 
    <li><a href="" data-uid="2">Two</a></li> 
 
    <li><a href="" data-uid="3">Three</a></li> 
 
    </ul> 
 
</nav>

Answer 1

sollten Sie that setzen eine lokale Variable zu sein (mit var):

$("nav a") 
 
    .mouseenter(function() { 
 
    // 
 
    }) 
 
    .mouseout(function(event) { 
 
    \t var that = $(this); 
 
    \t setTimeout(function(){ 
 
     \t \t console.log(that.data('uid')); 
 
     }, 100); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a href="" data-uid="1">One</a></li> 
 
    <li><a href="" data-uid="2">Two</a></li> 
 
    <li><a href="" data-uid="3">Three</a></li> 
 
    </ul> 
 
</nav>

In Ihrem aktuellen Code ist that eine globale Variable und mit jedem mouseout überschreiben Sie es als das neue Element.

Answer 2

Ihre Variable wird auf eine globale Variable ohne das Schlüsselwort var gehievt. Sie sollten strict mode verwenden, um dies in Zukunft zu vermeiden.

Edit: Wie @Dekel in den Kommentaren darauf hingewiesen, wird strict-Modus nicht Ihr Problem tatsächlich beheben, aber würde Fehler, wenn Sie versuchen, eine Variable ohne das Schlüsselwort var zu deklarieren. Es ist nur eine gute Vorgehensweise, um diese Art von unerwartetem Verhalten zu vermeiden.

'use strict'; 
 

 
$("nav a") 
 
    .mouseenter(function() { 
 
    // 
 
    }) 
 
    .mouseout(function(event) { 
 
    \t var that = $(this); 
 
    \t setTimeout(function(){ 
 
     \t \t console.log(that.data('uid')); 
 
     }, 100); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a href="" data-uid="1">One</a></li> 
 
    <li><a href="" data-uid="2">Two</a></li> 
 
    <li><a href="" data-uid="3">Three</a></li> 
 
    </ul> 
 
</nav>