javascript - 如何解决 jshint 警告 "Functions declared within loops"

Question

我理解为什么不应在循环内声明函数背后的理论，但我似乎无法弄清楚如何为数组中的每个对象添加事件监听器。我有一个数组，用于保存将用于在谷歌地图上创建标记的位置，我想添加一个事件监听器，以便当单击标记时，它会打开一个窗口并显示有关该标记的信息。如果不在 for 循环中添加事件监听器，如何实现此目的？

我的对象数组

var model = [
      {title: 'Lake Acworth', location: {lat: 34.0560394, lng: -84.689369}, type: 'fun'},
      {title: 'Town Center Mall', location: {lat: 34.0176429, lng: -84.566472},  type: 'fun'},
      {title: 'Kennesaw Mountain Battlefield', location: {lat: 33.9830771, lng: -84.5801223},  type: 'fun'},
      {title: 'SunTrust Park', location: {lat: 33.8907898, lng: -84.4699654},  type: 'fun'},
      {title: 'Barret Parkway Shopping Center', location: {lat: 33.9933893, lng: -84.6007358},  type: 'fun'},
      {title: 'RIdenour Estates', location: {lat: 33.9928034, lng: -84.591437},  type: 'apt'},
      {title: 'Vinings GA', location: {lat: 33.8715574, lng: -84.473635},  type: 'apt'},
      {title: 'Overton Rise Apartments', location: {lat: 33.8862235, lng: -84.4572464},  type: 'apt'},
      {title: 'The Encore', location: {lat: 33.8799177, lng: -84.4575624}, type: 'apt'},
      {title: 'The Reserve at the Ballpark', location: {lat: 33.8944195, lng: -84.4708393},  type: 'apt'},
];

添加事件监听器的 For 循环

function initMap() {
 var defaultIcon = makeMarkerIcon('0091ff');
 var highlightedIcon = makeMarkerIcon('FFFF24');
 largeInfowindow = new google.maps.InfoWindow();
 map = new google.maps.Map(document.getElementById('map'), {
  zoom: 11,
  center: {lat: 34.0691755, lng: -84.6587895},
  styles: styles
});
for(let i = 0; i < model.length; i++){

    var position = model[i].location;
    var title = model[i].title;

    marker = new google.maps.Marker({
      position: position,
      title: title,
      animation: google.maps.Animation.DROP,
      icon: defaultIcon,
      id: i
    });

    markers.push(marker);
    marker.setMap(map);

    marker.addListener('click', function() {
      populateInfoWindow(this, largeInfowindow);
    });

    marker.addListener('click', function(){

        toggleBounce(this);
    });

    marker.addListener('mouseover', function() {
      this.setIcon(highlightedIcon);
    });

    marker.addListener('mouseout', function() {
      this.setIcon(defaultIcon);
    });
  }
}

Answer 1

一种选择是在循环外部定义函数(给它们命名):

function clickFn1() {
  populateInfoWindow(this, largeInfowindow);
}

function clickFn2() {
  toggleBounce(this);
}

function mouseOutFn() {
  this.setIcon(defaultIcon);
}

function mouseOverFn() {
  this.setIcon(highlightedIcon);
}

然后在循环内使用它们:

for (let i = 0; i < model.length; i++) {

  var position = model[i].location;
  var title = model[i].title;

  marker = new google.maps.Marker({
    position: position,
    title: title,
    animation: google.maps.Animation.DROP,
    icon: defaultIcon,
    id: i
  });

  markers.push(marker);
  marker.setMap(map);

  marker.addListener('click', clickFn1);

  marker.addListener('click', clickFn2);

  marker.addListener('mouseover', mouseOverFn);

  marker.addListener('mouseout', mouseOutFn);
}

proof of concept fiddle

代码片段:

var markers = [];

function initMap() {
  var defaultIcon = "http://maps.google.com/mapfiles/ms/micons/blue.png";
  var highlightedIcon = "http://maps.google.com/mapfiles/ms/micons/yellow.png";
  largeInfowindow = new google.maps.InfoWindow();
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {
      lat: 34.0691755,
      lng: -84.6587895
    }
  });
  for (let i = 0; i < model.length; i++) {

    var position = model[i].location;
    var title = model[i].title;

    marker = new google.maps.Marker({
      position: position,
      title: title,
      animation: google.maps.Animation.DROP,
      icon: defaultIcon,
      id: i
    });

    markers.push(marker);
    marker.setMap(map);

    marker.addListener('click', clickFn1);

    marker.addListener('click', clickFn2);

    marker.addListener('mouseover', mouseOverFn);

    marker.addListener('mouseout', mouseOutFn);
  }

  function clickFn1() {
    populateInfoWindow(this, largeInfowindow);
  }

  function clickFn2() {
    toggleBounce(this);
  }

  function mouseOutFn() {
    this.setIcon(defaultIcon);
  }

  function mouseOverFn() {
    this.setIcon(highlightedIcon);
  }
}

function populateInfoWindow() {}

function toggleBounce() {}
var model = [{
    title: 'Lake Acworth',
    location: {
      lat: 34.0560394,
      lng: -84.689369
    },
    type: 'fun'
  },
  {
    title: 'Town Center Mall',
    location: {
      lat: 34.0176429,
      lng: -84.566472
    },
    type: 'fun'
  },
  {
    title: 'Kennesaw Mountain Battlefield',
    location: {
      lat: 33.9830771,
      lng: -84.5801223
    },
    type: 'fun'
  },
  {
    title: 'SunTrust Park',
    location: {
      lat: 33.8907898,
      lng: -84.4699654
    },
    type: 'fun'
  },
  {
    title: 'Barret Parkway Shopping Center',
    location: {
      lat: 33.9933893,
      lng: -84.6007358
    },
    type: 'fun'
  },
  {
    title: 'RIdenour Estates',
    location: {
      lat: 33.9928034,
      lng: -84.591437
    },
    type: 'apt'
  },
  {
    title: 'Vinings GA',
    location: {
      lat: 33.8715574,
      lng: -84.473635
    },
    type: 'apt'
  },
  {
    title: 'Overton Rise Apartments',
    location: {
      lat: 33.8862235,
      lng: -84.4572464
    },
    type: 'apt'
  },
  {
    title: 'The Encore',
    location: {
      lat: 33.8799177,
      lng: -84.4575624
    },
    type: 'apt'
  },
  {
    title: 'The Reserve at the Ballpark',
    location: {
      lat: 33.8944195,
      lng: -84.4708393
    },
    type: 'apt'
  },
];

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>