试图理解一个关闭函数

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