循环中绑定addEventListener按键事件无响应问题求助

核心问题列表 #

• 同步循环逻辑错误：JS是单线程同步执行，你写的do-while循环会在页面加载瞬间无限执行，charNumber变量在循环内没有修改逻辑，直接进入死循环阻塞整个页面，根本等不到用户按键输入。而且你在循环内重复绑定keydown事件监听，会导致同一个事件绑定成百上千个相同回调，后续触发时会重复执行。
• 拼写错误：
  • 函数定义关键字错误：funtion testKey 应为 function testKey
  • 变量名拼写不一致：lezioni[exerciceNumber] 应为 lessons[exerciceNumber]，exrciceNumber 应为 exerciceNumber
• 变量作用域问题：checkCharacter 定义在循环内部，testKey 函数中无法正确访问该变量
• 逻辑流程错误：没有在用户输入正确后修改charNumber切换下一个校验字符的逻辑
• PHP代码隐患：拼接JS数组时没有对文本内容的特殊字符做转义，如果文本内包含单引号会直接破坏JS语法，需要添加转义处理。

修复代码 #

PHP部分修改 #

// 原行修改为加addslashes转义
'".addslashes($row["text"])."'

JS部分完整修复代码 #

// 定义变量
var keys = "";
var exerciceNumber = 0;
var charNumber = 0;
// 缓存当前练习的文本，避免重复取值
var currentText = lessons[exerciceNumber][2];

// 播放音效函数
function sound(name) {
    var audio = new Audio(name + '.mp3');
    audio.play();
}

// 初始化页面文本
document.getElementById("lesson").innerHTML = "Lezione " + lessons[exerciceNumber][0];
document.getElementById("instructions").innerHTML = "Esercizio " + lessons[exerciceNumber][1] + ": scrivi <b>" + currentText + "</b>.";

// 按键校验函数
function testKey(event) {
    // 已经完成当前练习直接返回
    if (charNumber >= currentText.length) {
        return;
    }
    // 实时取当前需要校验的字符
    var checkCharacter = currentText.substr(charNumber, 1);
    if (event.key == checkCharacter) {
        sound("right");
        keys += event.key;
        document.getElementById("keyList").innerHTML = keys;
        // 校验成功后切换到下一个字符
        charNumber++;
        // 全部校验完成后的自定义逻辑，可自行修改
        if (charNumber >= currentText.length) {
            alert("当前练习已完成！");
        }
    } else {
        sound("wrong");
    }
}

// 全局仅绑定一次事件监听即可
document.addEventListener('keydown', testKey);

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