jshint - 不要在循环中创建函数 - 谷歌地图答案

【问题标题】：jshint - Don't make functions within a loop - google mapsjshint - 不要在循环中创建函数 - 谷歌地图
【发布时间】：2015-07-01 22:07:35
【问题描述】：

我创建了一个带有一些标记的谷歌地图（来自 wordpress 帖子），但是当我在控制台上运行“gulp”时出现以下错误：“不要在循环中创建函数。”

我创建了一个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();

【问题讨论】：

您为点击循环中的标记创建一个事件处理程序。您需要按照他们在这里的方式重新排列您的代码：jslinterrors.com/dont-make-functions-within-a-loop

标签： javascript google-maps loops gulp jshint

【解决方案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)); 
}

【讨论】：