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

Question

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

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

1. 我尝试使用 ES6 中的 let 来解决该错误，因为我认为这可以解决问题。我将 gruntfile 配置为也使用 ES6。

2. 我尝试使用两个循环，外部循环使用变量“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);