如何在JavaScript中显示延迟时长？现有按钮延迟显示代码求助

嘿，我来帮你搞定这个需求！原来的代码只是默默等10秒再显示按钮，现在要把剩余等待时长展示给用户，咱们得调整一下实现方式——因为jQuery的delay()方法是针对动画队列的，没法实时获取剩余时间，换用定时器来手动倒计时就可控多了。

具体实现步骤： #

1. 先在HTML里加一个用来显示倒计时的元素，和原来的按钮配合：

<div id="countdown">按钮将在 <span id="remaining-time">10</span> 秒后显示</div>
<button id="skip" style="display:none;">跳过</button>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

2. 然后修改JavaScript代码，用setInterval来做实时倒计时，到点后再显示按钮：

$(document).ready(function() {
    // 定义初始延迟时长（10秒 = 10000毫秒）
    const totalDelayMs = 10000;
    let remainingSeconds = totalDelayMs / 1000;
    
    // 获取页面元素
    const $countdownTip = $('#countdown');
    const $skipButton = $('#skip');
    const $timeDisplay = $('#remaining-time');

    // 每秒更新一次剩余时间
    const countdownTimer = setInterval(function() {
        remainingSeconds--;
        $timeDisplay.text(remainingSeconds);
        
        // 倒计时结束时的操作
        if (remainingSeconds <= 0) {
            clearInterval(countdownTimer); // 清除定时器
            $countdownTip.hide(); // 隐藏倒计时提示
            $skipButton.fadeIn(2200); // 按原来的动画显示按钮
        }
    }, 1000); // 每隔1000毫秒（1秒）执行一次
});

关键说明： #

• 我们把原来的delay()替换成了setInterval定时器，这样能实时追踪剩余等待时间并更新页面显示
• 倒计时到0时，会自动清除定时器，隐藏提示文本，然后按你原来的fadeIn(2200)动画显示按钮
• 如果你需要调整延迟时长，只需要修改totalDelayMs的值就行，剩余时间会自动计算

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