Javascript(NodeJS) 如何处理事件的范围和上下文

Question

有点迷茫，
在这里给出示例代码，我正在加载几个 url，并连接事件监听器：

var pages= Array();
var loading= Array();

for(i=0; i < urls.length; i++){
var page =new WebPage(urls[i]);

   page.onLoadStarted = function() {
       loading[i]= true;
       console.log('Loading started');
   };    
   pages[i]=page;

}

我有 5 个 url，我在控制台输出中出现了 5 次“加载开始”，但是加载数组只定义了一个值 (true)，其余的都是“未定义”；看起来当事件被触发时 loading[i]= true; 使用 I 的最后一个值来访问数组而不是使用它的地址。我该如何解决？

我试过向页面对象添加属性，但同样的事情发生了；

这是我试过的方法：

var pages= Array();

for(i=0; i < urls.length; i++){
var page =new WebPage(urls[i]);

   page.onLoadStarted = function() {
       page.loading= true;
       console.log('Loading started');
   };    
   pages[i]=page;

}

Answer 1

如果 onLoadStarted 是事件处理程序，则 for 循环的执行速度比所有事件处理程序快得多。在那段时间 i 是 5，并且在每次函数调用期间，数组的第六个索引会填充一个 true 值。由于数组的较低索引没有任何设置值，因此您会得到这样的输出。

一个选项是使用 Array.prototype.forEach 或 Array.prototype.map 方法。这两个函数都将函数作为处理程序。作为函数的处理程序创建一个新范围并记住定义的值。

urls.forEach(function(url /* element */, i /* index */) {
   var page = new WebPage(url);

   page.onLoadStarted = function() {
       loading[i]= true;
       console.log('Loading started');
   };    
   pages[i]=page;
})

Answer 2

尝试使用此代码 (es6)

    let pages = Array();
    urls.map((url,i) =>{
     let page = new WebPage(urls[i]);

     page.onLoadStarted(() =>{
      loading[i] = true;
      console.log('Loading started');
     })

(es5)

    var pages = Array();
    urls.map(function(url,i){
     var page = new WebPage(urls[i]);

     page.onLoadStarted(function(){
      loading[i] = true;
      console.log('Loading started');
     })

Javascript(NodeJS) 如何处理事件的范围和上下文

How does Javascript(NodeJS) handle scope and context with regard to events

javascript

scope

event-handling

node.js

dom-events