不要在循环 jshint 中创建函数答案

【问题标题】：dont make functions within a loop jshint不要在循环 jshint 中创建函数
【发布时间】：2017-05-15 06:19:02
【问题描述】：

for (var p = 0; p < tokiyoPoints.length; p++) { //for loop
        var tpoint = new google.maps.Marker({ //MAP MARKER
            map: map, //MAP BY ID
            //MARKER DROP
            animation: google.maps.Animation.DROP,
            venue: tokiyoPoints[p].pointId, //FOR LIKES AND RATING
            title: tokiyoPoints[p].pointName, //TITLE OF POINT
            show: ko.observable(true), //SHOW POINT
            selected: ko.observable(false), //SELECT POINT
            position: { //POINT POSITION
                lat: tokiyoPoints[p].pointLat,
                lng: tokiyoPoints[p].pointLng
            }
        });
        tokiyo.push(tpoint); //ADD POINT AT THE END
        tpoint.addListener('click', function() {
            //CLICK ON THE POINTER
            pointerInfo(this, tokyoInfo);
        });
        tpoint.addListener('click', function() {
            //CLICK ON THE POINTER
            BOUNCE(this);
        });

    tpoint.addListener('mouseover', function() {
            //MOSEOVER ON POINT
            this.setIcon(nIcon);
        });
        tpoint.addListener('mouseout', function() {
            //MOUSEOUT FROM THE POINTER
            this.setIcon(uIcon);
        });
    }

它给出了错误-

不要在循环js中创建函数

【问题讨论】：

这可能是一个错误，但代码应该没问题......在for循环之外将函数声明为命名函数，或者使用tokiyoPoints.forEach来避免这个问题
Jaromanda X 你能给我一个详细的解决方案而不是这个吗？
确实如此。我发表评论是因为你不相信有多少人只需要模糊地向他们描述解决方案才能自己解决问题 - 我会发布一个答案，但这是由期望值较低的人完成的
@JaromandaX 抱歉，如果答案不是针对此问题的正确操作。我只是觉得最好解释一下。如有遗漏，请指出。如果你想回答，我会删除我的，因为复制对任何人都没有帮助。我也在lower expectation上失去了你。
@Rajesh - 很好，你的回答完全正确，我的评论不是针对你的 - lower expectation 根本不是对任何人的侮辱 - 我发布了第一条评论因为有些人只要轻推一下就会自己弄清楚

标签： javascript

【解决方案1】：

它抛出错误的原因是因为您在循环中创建函数（事件处理程序）。

因此，如果您有 100 个点，您将创建 400 个函数，但它们的结构将保持不变。避免这种情况的正确方法是在循环外有一个命名函数并将这些函数的引用传递给事件。

for (var p = 0; p < tokiyoPoints.length; p++) { //for loop
  var tpoint = new google.maps.Marker({ //MAP MARKER
    map: map, //MAP BY ID
    //MARKER DROP
    animation: google.maps.Animation.DROP,
    venue: tokiyoPoints[p].pointId, //FOR LIKES AND RATING
    title: tokiyoPoints[p].pointName, //TITLE OF POINT
    show: ko.observable(true), //SHOW POINT
    selected: ko.observable(false), //SELECT POINT
    position: { //POINT POSITION
      lat: tokiyoPoints[p].pointLat,
      lng: tokiyoPoints[p].pointLng
    }
  });
  tokiyo.push(tpoint); //ADD POINT AT THE END
  tpoint.addListener('click', clickHandler1);
  tpoint.addListener('click', clickHandler2);

  tpoint.addListener('mouseover', mouseOverHandler);
  tpoint.addListener('mouseout', mouseOutHandler);
}

function clickHandler1() {
  //CLICK ON THE POINTER
  pointerInfo(this, tokyoInfo);
}

function clickHandler2() {
  //CLICK ON THE POINTER
  BOUNCE(this);
}

function mouseOverHandler() {
  //MOSEOVER ON POINT
  this.setIcon(nIcon);
}

function mouseOutHandler() {
  //MOUSEOUT FROM THE POINTER
  this.setIcon(uIcon);
}

【讨论】：