循环中的对象创建中断;展开作品 [英] Object creation in loop broken; unrolled works

问题描述

我正在进行一些测试并遇到了这种奇怪的情况：第一种情况（像循环中指定InfoWindows这样的对象）并不像预期的那样工作，而逐一编写任务确实有效。

预期的行为是当鼠标悬停在标记上时InfoWindow打开。许多窗口应该同时打开。

从表面上看，我没有看到任何区别。这是怎么回事？我为每个案例展示了相关的代码和一个完整的JSFiddle。

不起作用 JSFiddle

  iwArray = []; 
 for（var i = 0; i <3; i ++）{
 iwArray [i] = new google.maps.InfoWindow（{content：w}）; 
 google.maps.event.addListener（marker [i]，'mouseover'，function（e）{
 iwArray [i] .open（map，this）; 
}）; 
} 
  

有效，但很丑陋 JSFiddle

  iwArray = []; 
 
 iwArray [0] = new google.maps.InfoWindow（{content：w 0}）; 
 google.maps.event.addListener（marker [0]，'mouseover'，function（e）{
 iwArray [0] .open（map，this）; 
}）; 
 
 iwArray [1] = new google.maps.InfoWindow（{content：w 1}）; 
 google.maps.event.addListener（marker [1]，'mouseover'，function（e）{
 iwArray [1] .open（map，marker [1]）; 
} ）; 
 
 iwArray [2] = new google.maps.InfoWindow（{content：w 2}）; 
 google.maps.event.addListener（marker [2]，'mouseover'，function（e）{
 iwArray [2] .open（map，marker [2]）; 
} ）; 
  

解决方案

使用闭包：

  for（var i = 0; i <3; i ++）{
（function（i）{
 iwArray [i] =新的google.maps.InfoWindow（{content：w}）; 
 google.maps.event.addListener（marker [i]，'mouseover'，function（e）{
 iwArray [i] .open（map，this）; 
}）; 
}）（i）; 
} 
  

I'm doing some testing and ran into this bizarre situation: The first case (assigning objects like InfoWindows in a loop) does not work as expected, while writing the assignments one by one does work.

The expected behavior is for an InfoWindow to open when the mouse is over a marker. Many windows should stay open at the same time.

Superficially, I don't see any difference. What's going on? I'm showing relevant code and a full JSFiddle for each case.

Does not work JSFiddle

    iwArray = [];
    for (var i = 0; i < 3; i++) {
      iwArray[i] = new google.maps.InfoWindow({content: "w "});
      google.maps.event.addListener(marker[i], 'mouseover', function(e) {
        iwArray[i].open(map, this);
      });
    }

Works, but is ugly JSFiddle

    iwArray = [];

    iwArray[0] = new google.maps.InfoWindow({content: "w 0"});
    google.maps.event.addListener(marker[0], 'mouseover', function(e) {
      iwArray[0].open(map, this);
    });

    iwArray[1] = new google.maps.InfoWindow({content: "w 1"});
    google.maps.event.addListener(marker[1], 'mouseover', function(e) {   
      iwArray[1].open(map, marker[1]);
    });

    iwArray[2] = new google.maps.InfoWindow({content: "w 2"});
    google.maps.event.addListener(marker[2], 'mouseover', function(e) {
      iwArray[2].open(map, marker[2]);
    });

解决方案

Use closure:

 for (var i = 0; i < 3; i++) {
    (function(i){
       iwArray[i] = new google.maps.InfoWindow({content: "w "});
       google.maps.event.addListener(marker[i], 'mouseover', function(e) {
          iwArray[i].open(map, this);
       });
    })(i);
}

这篇关于循环中的对象创建中断;展开作品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！