javascript - 如何修复 JSHint "Don' t makefunctions inside aloop”(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说不要在循环内创建函数。 ( http://jshint.com/docs/options/#loopfunc )

请注意，我想在纯 JavaScript 中修复此问题(没有其他框架)。这里有人知道我如何完成这个任务吗？

Answer 1

该警告试图防止您遇到类似 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;
}