Как решить jshint предупреждение "Функции, объявленные в циклах" - PullRequest
Новая
       8

Как решить jshint предупреждение "Функции, объявленные в циклах"

0 голосов
/ 16 мая 2018

Я понимаю теорию, почему вы не должны объявлять функции внутри цикла, но я не могу понять, как добавить обработчики событий для каждого объекта в моем массиве. У меня есть массив, в котором хранятся местоположения, которые будут использоваться для создания маркеров на карте Google, и я хочу добавить прослушиватель событий, чтобы при нажатии на маркер открывалось окно и отображалась информация о маркере. Как я могу достичь этого без добавления прослушивателя событий внутри цикла 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'},
];

Для цикла, в который добавляются прослушиватели событий 

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);
    });
  }
}

1 Ответ

0 голосов
/ 17 мая 2018

Один из вариантов - определить функции вне цикла (дать им имена): 

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концептуальной скрипки

фрагмент кода: 

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>
...