如何处理倒计时按钮，避免点击后显示负值？

问题根源 #

• 每次点击按钮都会触发countdown()，全局变量timeLeft被多次递减，直接导致数值变为负数。
• 倒计时过程中按钮未被禁用，用户可重复点击触发多次倒计时逻辑。
• 每次点击都会创建新的setInterval，造成后续逻辑冲突。

修复后的代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id="tmp_button-72286">Download Now</button>

JavaScript

let timeLeft = 10;
let countdownTimer = null;
let resetTimer = null;

function countdown() {
    timeLeft--;
    // 强制限制数值不低于0
    if (timeLeft < 0) timeLeft = 0;
    
    $("#tmp_button-72286").text(`Download will be ready in ${timeLeft} seconds`);
    
    if (timeLeft > 0) {
        countdownTimer = setTimeout(countdown, 1000);
    } else {
        // 倒计时结束后恢复下载按钮
        restoreDownloadButton();
    }
}

function restoreDownloadButton() {
    $("#tmp_button-72286").html('<a id="myLink" target="_blank" href="link"><button id="thor">Download Now</button></a>');
    // 重新绑定内部按钮的点击事件
    $("#thor").on("click", handleButtonClick);
    // 清除残留定时器
    clearTimeout(resetTimer);
    countdownTimer = null;
    resetTimer = null;
}

function handleButtonClick() {
    // 禁用当前按钮，阻止重复点击
    $(this).prop("disabled", true);
    // 重置倒计时初始值
    timeLeft = 10;
    // 清除之前的定时器，避免逻辑冲突
    if (countdownTimer) clearTimeout(countdownTimer);
    if (resetTimer) clearTimeout(resetTimer);
    
    // 启动倒计时
    countdown();
    // 设置单次定时器，倒计时结束后恢复按钮（替代原setInterval，避免重复执行）
    resetTimer = setTimeout(restoreDownloadButton, 10 * 1000);
}

// 初始绑定点击事件
$("#tmp_button-72286").on("click", handleButtonClick);

关键修改说明 #

• 禁用重复点击：点击按钮后立即禁用，直到倒计时结束或按钮恢复。
• 数值下限控制：在countdown()中强制将timeLeft限制在0及以上。
• 单一定时器管理：用变量保存定时器实例，每次启动前清除旧定时器，避免多逻辑并行。
• 事件重新绑定：因倒计时结束后替换了内部按钮元素，需重新绑定点击事件确保功能正常。
• 替换setInterval为setTimeout：倒计时结束仅需恢复一次按钮，用单次定时器更合理。

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