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（i）只在我鼠标时记录“索引”在一个李？

Answer 1

我想知道为什么第一个console.log（i）在10秒超时后立即记录1到10

因为超时回调有一个循环并在循环中调用ShowQuestion。 ShowQuestion的第一个语句是console.log，所以当循环运行时，你会看到所有这些，一个接着一个。

但第二个console.log（i）记录＆＃34;索引＆＃34;只有当我鼠标悬停在一个李？

因为ShowQuestion返回一个函数;循环代码将该函数分配给元素的onmouseover属性，使其成为mouseover事件的旧式事件处理程序。由ShowQuestion创建的函数不会运行，直到/除非该事件发生，并且只要该事件发生就重新运行。

当i是提供给i的参数时，以及ShowQuestion运行处理程序时，您可能想知道该事件处理程序为什么/如何显示mouseover } event，ShowQuestion已经返回。答案是函数ShowQuestion在对ShowQuestion的特定调用的上下文中创建了一个闭包，包括范围内的参数和变量。因此，来自i的每次调用的ShowQuestion的每个副本都会幸存，即使与ShowQuestion相关的调用已完成。

更多：

此处SO：How do JavaScript closures work?
在我贫穷的小博客上：Closures are not complicated

试图理解一个闭包函数

1 个答案: