jshint - 不要在循环中制作函数 - 谷歌地图

Question

我创建了一个带有一些标记的谷歌地图（来自wordpress帖子），但当我在控制台上运行"gullow"时，我出现了这样的错误："不要在循环中生成函数。"

我创建了一个jsfiddle来复制本地主机的情况，有人能帮我解决这个问题吗？

我知道如果我写"//jshint ignore:line"gulp来创建脚本，但我认为这个问题可能是我在chrome上遇到的另一个错误的问题：（

var infowindow = new google.maps.InfoWindow();
var gmarkers = []; 
function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(51.508293, -0.127701),
    mapTypeControl: false,
    panControl: false,
    zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_CENTER
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  for (var i = 0; i < locations.length; i++) {
    var marker = new google.maps.Marker({
      position: locations[i].latlng,
      icon: locations[i].marker,
      map: map,
      animation: google.maps.Animation.DROP,
      optimized : false
    });
    gmarkers.push(marker);
    google.maps.event.addListener(marker, 'click',
      (function(marker, i) {
        return function() {
          map.panTo(marker.getPosition());
          //method 2
          var target = jQuery("#item" + i);
          jQuery(target).show().siblings("div").hide();
          if (!jQuery('#all-posts').hasClass('active')){
            jQuery("#all-posts").toggleClass("active");
            jQuery("#close-btn").toggleClass("active");
          }
          // stop yt video
          //jQuery("#stop-yt-video").trigger("click");
        };
      })(marker, i)
    );  
  }
}
initialize();

Answer 1

获取IIFE函数，将其移出循环并为其命名，如makeHandler（但不要调用它）。

function makeHandler(marker, i) {
  return function() {
    map.panTo(marker.getPosition());
    //method 2
    var target = jQuery("#item" + i);
    jQuery(target).show().siblings("div").hide();
    if (!jQuery('#all-posts').hasClass('active')){
          jQuery("#all-posts").toggleClass("active");
          jQuery("#close-btn").toggleClass("active");
    }
    // stop yt video
    //jQuery("#stop-yt-video").trigger("click");
  };
}

然后在循环中，这样做：

for (var i = 0; i < locations.length; i++) {
  var marker = new google.maps.Marker({
    position: locations[i].latlng,
    icon: locations[i].marker,
    map: map,
    animation: google.maps.Animation.DROP,
    optimized : false
  });
  gmarkers.push(marker);
  google.maps.event.addListener(marker, 'click', makeHandler(marker, i)); 
}