試圖理解一個關閉函數

Question

我在谷歌的幫助下做了一個關閉函數。該功能正常工作。但是，我不確定知道它是如何工作的。

function ShowQuestion(i) { 
    console.log(i); // here 1 to 10 are logged immediately. 
    return function() { 
    console.log(i); // here the number are only logged when I mouse over on any li. 
    } 
} 

setTimeout(function() {  
    for (i = 0; i < document.getElementById('Previousli').getElementsByTagName('ul')[0].children.length; i++) { 
    document.getElementById('Previousli').getElementsByTagName('ul')[0].children[i].onmouseover = ShowQuestion(i); 
    }  
}, 10000); 

首先，我想知道爲什麼第一次執行console.log（i）該10秒出後，立即登錄1〜10，但第二次的console.log（一）登錄的「指數」只有當我把鼠標放在裏面時

Answer 1

我不知道爲什麼第一的console.log（I）1到10的10秒出

後立即登錄，因爲超時回調有一個循環，並在循環中調用ShowQuestion。 ShowQuestion的第一條語句是console.log，所以您可以在循環運行時看到所有這些，一個接一個地看。

但第二個console.log（i）只有當我將鼠標放在li上時才記錄「index」？

因爲ShowQuestion返回一個函數;循環代碼將該函數分配給元素的onmouseover屬性，使其成爲mouseover事件的老式事件處理程序。 ShowQuestion創建的功能不運行，直到/除非發生該事件，並且在發生該事件時重新運行。

你可能想知道爲什麼/該事件處理程序如何顯示i時i是提供給ShowQuestion和處理程序是由mouseover事件運行的時間參數，ShowQuestion已經返回。答案是ShowQuestion創建的功能是關閉，其中包括範圍內的參數和變量，該具體調用ShowQuestion。因此，每個到ShowQuestion的電話的每個i副本都會存活，即使與之相關的ShowQuestion的呼叫已完成。

更多：

• 這裏的SO：How do JavaScript closures work?
• 在我的貧血小博客：Closures are not complicated