如何修复 JSHint "Don't make functions within a loop"（loopfunc 规则）警告？

Question

 <button id="rock" class="tools">Rock</button>
 <button id="paper" class="tools">Paper</button>
 <button id="scissor" class="tools">Scissor</button>

我正在尝试获取一个随机按钮 ID 名称并具有以下代码

var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;

for(var i = 0; i < buttonsCount; i++) {
 buttons[i].onclick = function() {
  console.log(this.id);
 }; 
}

但是 JSHint validator says Don't make functions within a loop. (http://jshint.com/docs/options/#loopfunc)

请注意，我想在 JavaScript 中解决这个问题（没有其他框架）。这里有人知道我是怎么做到的吗？

Answer 1

i<=buttonsCount 应该是 i<buttonsCount

var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;

for(var i = 0; i < buttonsCount; i++) {
    buttons[i].onclick = function() {
        console.log(this.id);
    }   
}

Answer 2

该警告试图防止您运行遇到类似 JavaScript closure inside loops – simple practical example 的问题（这种情况很常见，仅在 SO 上就有大约 1800 个重复项或相关问题）。

幸运的是，您的实际代码不受此问题的影响，这意味着我们可以将函数从循环中拉出。这也修复了 JSHint 警告：

var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
var handler = function () {
    console.log(this.id);
};

for (var i = 0; i < buttonsCount; i++) {
    buttons[i].onclick = handler;
}

如何修复 JSHint "Don't make functions within a loop"（loopfunc 规则）警告？

How to fix JSHint "Don't make functions within a loop" (loopfunc rule) warning?

javascript

jshint