JavaScript循环绑定按钮点击事件 索引i未按预期递增异常排查

• 业务需求：共4个不同颜色的按钮，需将用户点击操作与预设颜色数组做匹配校验
• 预期效果：每次点击按钮后返回对应校验结果，索引值i随点击次数逐次递增，按1、2、3……的顺序依次变化
• 异常表现：点击按钮后一次性输出15次校验结果，控制台打印的i值固定为15，未按预期顺序逐次增长

var arrColor = ['blue', 'yellow', 'green', 'red', 'blue', 'blue', 'yellow', 'blue', 'blue', 'yellow', 'yellow', 'green', 'green', 'blue', 'yellow'];

var i = 0;
for (var i = 0; i < 15; i++) {
    $(".btn").click(function (event) {
        console.log(i); // check on i
        if (arrColor[i] === event.target.id) {
            console.log("great");
        }
        else {
            console.log("Wrong");
        }
    });

}

运行效果截图：

代码存在两个核心逻辑错误：

1. 循环内重复绑定事件：for循环执行15次，就会给所有class为btn的元素累计绑定15个相同的点击回调，单次点击会触发全部15个回调，因此会一次性输出15次结果
2. 变量作用域问题：var声明的变量不存在块级作用域，循环内所有点击回调共享同一个全局i变量。for循环执行完成后i的值已经累加到15，后续点击触发回调时读取到的i永远是循环结束后的15，不会随点击变化。

不需要用循环绑定事件，只需要绑定一次点击回调，在回调内部维护索引递增逻辑即可：

const arrColor = ['blue', 'yellow', 'green', 'red', 'blue', 'blue', 'yellow', 'blue', 'blue', 'yellow', 'yellow', 'green', 'green', 'blue', 'yellow'];
let currentIndex = 0;
// 仅绑定一次点击事件
$(".btn").click(function (event) {
    // 索引超出数组长度时终止校验
    if (currentIndex >= arrColor.length) {
        console.log("全部校验流程已结束");
        return;
    }
    console.log(currentIndex);
    if (arrColor[currentIndex] === event.target.id) {
        console.log("great");
        // 匹配成功后索引+1，进入下一轮校验
        currentIndex++;
    } else {
        console.log("Wrong");
        // 若要求答错不推进校验流程，保留currentIndex++在成功分支即可；若答错也需要进入下一轮，将currentIndex++移到判断逻辑外
    }
})

内容的提问来源于stack exchange，提问作者cyka