如何让EventListener持续运行直到条款复选框被勾选

你当前代码无法正常工作是两个低级逻辑错误导致的，不需要使用循环、防抖这类方案：

• 校验判断逻辑误用逗号运算符：你写的if (checkFirstName(),checkLastName(),checkEmail(),checkTelephone() === true) 中，逗号运算符只会返回最后一个表达式的结果，也就是仅判断手机号校验是否通过，姓、名、邮箱三个字段的校验结果被完全忽略，这三个字段输入错误时根本不会触发校验失败逻辑。
• 最初的校验函数未重置校验状态：最早版本的evaluate()仅在全字段校验通过时给evalResult赋值true，校验失败时没有将变量重置为false，一旦某次校验通过，变量值会一直保持true，后续输入错误也不会更新状态。

input事件本身会在用户修改任意输入项时自动触发，只要逻辑正确就能实时同步复选框状态，不需要额外加循环或者防抖：

const termsCheckbox = document.getElementById("terms");

function showBox() {
    termsCheckbox.style.visibility = "visible";
    console.log("a wild box appeared!");
}

function hideBox() {
    termsCheckbox.style.visibility = "hidden";
    // 隐藏时自动取消勾选，避免隐藏状态下仍为选中值导致无效提交
    termsCheckbox.checked = false;
    console.log("the box fled!");
}

// 实时监听输入变化做校验
document.querySelector("form").addEventListener("input", () => {
    const isFormValid = checkFirstName()
        && checkLastName()
        && checkEmail()
        && checkTelephone();
    isFormValid ? showBox() : hideBox();
});

// 提交时加一层兜底校验，避免极端场景绕过前端校验
document.querySelector("form").addEventListener("submit", (e) => {
    const isFormValid = checkFirstName()
        && checkLastName()
        && checkEmail()
        && checkTelephone();
    const isTermsAgreed = termsCheckbox.checked;
    if (!isFormValid || !isTermsAgreed) {
        e.preventDefault();
        if (!isFormValid) hideBox();
        alert("请完善所有必填项并同意条款后提交");
    }
});

• 不需要用循环：绑定在form上的input事件自带事件委托机制，只要你不主动调用removeEventListener解绑，会一直监听所有输入项的变化，哪怕复选框已经显示，只要后续输入导致校验不通过，会立刻触发隐藏逻辑，完全满足你的需求。
• 不需要用防抖：你的校验逻辑都是本地同步的字段格式判断，执行速度极快，每次输入都触发不会有任何性能问题，实时显隐的交互体验反而更好。
• 提交前的兜底校验是必要的：防止用户通过浏览器开发者工具修改DOM、或者浏览器自动填充等特殊场景绕开显隐逻辑提交无效数据。

避坑提示：多条件同时成立的判断必须使用&&（逻辑与）运算符连接，绝对不要用逗号分隔判断条件，逗号运算符仅会返回最后一个表达式的执行结果，这是很多新手写判断时容易踩的语法坑。

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