输入框为空时如何实现10秒后刷新页面？现有代码输入内容仍刷新如何解决

问题原因 #

你在页面加载阶段就完成了输入框取值并赋值给msg变量，此时变量值固定为初始的空字符串，后续用户输入内容不会更新该变量的取值，因此10秒后的判断逻辑永远会命中空值条件，触发页面刷新。

修复代码 #

<input type="text" name="message" id="checkmsg" required />

<script>
    function RefreshPage() {
        setTimeout(function () {
            // 倒计时结束时读取输入框的实时内容
            var msg = document.getElementById("checkmsg").value;
            console.log(msg);
            if (msg === "") {
                window.location.reload();
            }
        }, 10000);
    };
    
    RefreshPage()
</script>

可选优化 #

如果需要实现「用户输入时自动重置10秒倒计时」，避免用户正在输入时页面到期刷新，可以补充以下逻辑：

let timer = null;
function RefreshPage() {
    // 先清除已有的定时器，实现重置效果
    if(timer) clearTimeout(timer);
    timer = setTimeout(function () {
        var msg = document.getElementById("checkmsg").value;
        if (msg === "") {
            window.location.reload();
        }
    }, 10000);
};
// 页面加载时初始化倒计时
RefreshPage();
// 输入框内容变化时重置倒计时
document.getElementById("checkmsg").addEventListener('input', RefreshPage);

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