that = $（this）for setTimeout closure not working as expected expected

Question

我想在按鈕mouseout中使用setTimeout並參考setTimeout中的$(this)（按鈕）。我使用that = $(this)，然後用在setTimeoutthat但很喜歡它預期不起作用。

如果你將鼠標懸停在每一個環節慢慢它的工作原理（1,2,3）。但是如果你以100ms的速度快速完成，我會獲得所有3s（3,3,3）。

我的猜測是關閉不工作和that VAR被覆蓋，但我就是想不通爲什麼。

你能解釋發生了什麼？

$("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

您應該設置that是（使用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>

在你當前的代碼，that是一個全局變量，並與每個mouseout您將其重寫爲新元素。

Answer 2

你的變量是被提升到一個全球性的，而不var關鍵字。你應該考慮在未來使用strict mode來避免這種情況。

編輯：@Dekel在評論中指出，嚴格的模式實際上不會解決您的問題，但是當你試圖聲明一個變量沒有var關鍵字會出錯誤。這是避免這種意外行爲的一個好習慣。

'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>