onmouseover和onmouseout函數包含時間間隔不正確

Question

我正在做一些JavaScript實驗，我有一個4個項目水平顯示的列表，每個列表項目分配了onmouseover和onmouseout事件。

每個項目的onmouseover事件執行一個函數，使用間隔隨時間增加項目的高度。

outmouseover事件爲每個項目執行一個函數，然後使用另一個時間間隔將該項目的高度降低到其默認值。

它是工作在以下情形： 當我觸發onmouseover列表項目高度的增加不如預期，而當我把鼠標從列表項的高度則降低了預期。

但問題是，它似乎並不在下列情況下工作： 當我觸發onmouseover列表項目高度的增加不如預期，但是如果我之前觸發另一onmouseover事件另一個列表項該項目已恢復到其原始大小，上一個列表項目的onmouseout函數未完成執行。

對不起，如果我缺乏任何細節，顯然我解釋的東西非常糟糕....所以我有一個鏈接到源代碼和一個網站，您可以測試代碼，看看發生了什麼。

也許我對javascript的理解並不像我想的那麼多，所以雖然解決方案或修復會很棒，但我也很樂意接受任何建議或某種解釋，說明爲什麼會發生這種情況。

我最初以爲多個間隔定時器不能同時執行，直到一些研究發現他們可以。所以現在我正在考慮這是否是onmouseover和onmouseout事件之間的衝突。

任何意見，指導或解決方案將不勝感激！

來源： https://docs.google.com/open?id=0B6XLOOGyKVdWVkpSUklmMVI5QUk
測試網站： http://www.play-hookey.com/htmltest/
（只複製，谷歌文檔的內容並粘貼到網站的HTML文本區域，看看我說的）

Answer 1

您的代碼：

icon.onmouseover = function(){ enlarge(this, icon.ID); }; 
icon.onmouseout = function(){ reduce(this, icon.ID); }; 

正確的代碼：

icon.onmouseover = function(){ enlarge(this, this.ID); }; 
icon.onmouseout = function(){ reduce(this, this.ID); }; 

發生了什麼事：你將一個事件與一個函數綁定並將變量傳遞給它。在每個for循環之後，您重新定義了該函數變量（因此最後，您的icon.ID = 3）。這意味着所有關於event的函數都使用相同的icon.ID = 3。

我希望有道理...