JSHint 关于使用外部变量的循环内闭包的警告

Question

我的代码确实有效，但我不想再出现 jshint 错误：

Functions declared within loop referencing an outer scoped variable may lead to confusing semantics

我已经尝试使用 ES6 中的 let 来解决错误，因为我认为这会解决问题。我也将我的 gruntfile 配置为使用 ES6。
我尝试使用两个循环，带变量 'i' 的外循环和带变量 'j'

都没用。

此处提供完整代码：https://jsfiddle.net/rwschmitz/zz7ot3uu/

var hobbies = document.getElementsByClassName("hobbies");
var active = false;

// For mouse input

for (var i = 0; i < 5; i++) {
    hobbies[i].onmouseover = function() {
            hobbies[0].classList.add('hobbies-slide-left');
            hobbies[1].classList.add('hobbies-slide-right');
            hobbies[2].classList.add('hobbies-slide-left');
            hobbies[3].classList.add('hobbies-slide-right');
            hobbies[4].classList.add('hobbies-slide-left');
    };
}

// For click input

for (var i = 0; i < 5; i++) {
    hobbies[i].onclick = function() {
            hobbies[0].classList.add('hobbies-slide-left');
            hobbies[1].classList.add('hobbies-slide-right');
            hobbies[2].classList.add('hobbies-slide-left');
            hobbies[3].classList.add('hobbies-slide-right');
            hobbies[4].classList.add('hobbies-slide-left');
    };
}

Answer 1

您可以使用 Array#forEach():

将循环更改为类似这样的内容

var hobbies = Array.from(document.getElementsByClassName('hobbies'));
var classes = ['hobbies-slide-left', 'hobbies-slide-right'];
var events = ['mouseover', 'click'];

function addHobbyClass (hobby, index) {
  hobby.classList.add(this[index % this.length]);
}

function hobbyEventListener () {
  hobbies.forEach(addHobbyClass, classes);
}

hobbies.forEach(function (hobby) {
  this.forEach(function (event) {
    this.addEventListener(event, hobbyEventListener);
  }, hobby);
}, events);

Answer 2

关于如何解决问题的另外两个示例。

var hobbies = document.querySelectorAll('.hobbies');
var eventHooks = ['mouseover', 'click'];

hobbies.forEach(function(hobby) {
  eventHooks.forEach(function(hook) {
    hobby.addEventListener(hook, function() {
      hobbies[0].classList.add('hobbies-slide-left');
      hobbies[1].classList.add('hobbies-slide-right');
      hobbies[2].classList.add('hobbies-slide-left');
      hobbies[3].classList.add('hobbies-slide-right');
      hobbies[4].classList.add('hobbies-slide-left');
    });
  });
});

var hobbies = document.getElementsByClassName('hobbies');
var eventHooks = ['mouseover', 'click'];

// Attach events
var attachEvents = function(key) {
  eventHooks.forEach(function(hook) {
    hobbies[key].addEventListener(hook, function() {
      hobbies[0].classList.add('hobbies-slide-left');
      hobbies[1].classList.add('hobbies-slide-right');
      hobbies[2].classList.add('hobbies-slide-left');
      hobbies[3].classList.add('hobbies-slide-right');
      hobbies[4].classList.add('hobbies-slide-left');
    });
  });
};

// Init
var init = function() {
  // Loop through hobbies
  for (var i = 0; i < hobbies.length; i++) {
    attachEvents(i);
  }   
}

init();

JSHint 关于使用外部变量的循环内闭包的警告

JSHint warning about closures inside loops using outer variables

javascript

closures

loops

jshint