IE11及更早版本右键打开上下文菜单时setTimeout倒计时停止问题咨询

嘿，这个IE11的坑我之前也踩过！确实，在老IE里右键打开上下文菜单时，浏览器的事件循环会被阻塞，导致setTimeout的回调完全挂起，直到菜单关闭才会继续执行。既然禁用右键的方案行不通，那咱们换个思路——不依赖定时器的触发次数来计算剩余时间，而是基于时间戳的差值来实时计算，这样不管浏览器被什么操作阻塞，倒计时都能保持精准。

核心思路 #

与其每次用定时器减1，不如记录倒计时的起始时间戳，每次更新时计算当前时间与起始时间的差值，用总时长减去已流逝的时间，得到真正的剩余时间。这样就算定时器被阻塞，只要恢复后重新计算，结果依然准确。

具体实现代码 #

首先，咱们先搭好基础的倒计时逻辑：

// 配置总倒计时时长（比如60秒）
const totalCountdownSeconds = 60;
// 记录倒计时开始的时间戳
let countdownStartTime = Date.now();
// 保存定时器ID，用于后续清理
let timerHandler = null;

// 更新倒计时的核心函数
function updateCountdownDisplay() {
    // 计算已经流逝的时间（毫秒转秒）
    const elapsedSeconds = Math.floor((Date.now() - countdownStartTime) / 1000);
    // 计算剩余时间，确保不会出现负数
    const remainingSeconds = Math.max(totalCountdownSeconds - elapsedSeconds, 0);

    // 更新页面上的倒计时显示
    const countdownElement = document.getElementById('countdown');
    if (countdownElement) {
        countdownElement.textContent = `剩余 ${remainingSeconds} 秒`;
    }

    // 如果倒计时还没结束，继续触发下一次更新
    if (remainingSeconds > 0) {
        timerHandler = requestAnimationFrame(updateCountdownDisplay);
    } else {
        // 倒计时结束，清理定时器并执行收尾逻辑
        cancelAnimationFrame(timerHandler);
        if (countdownElement) {
            countdownElement.textContent = '倒计时结束！';
        }
    }
}

解决requestAnimationFrame后台暂停的问题 #

你提到的requestAnimationFrame在浏览器最小化或标签页隐藏时会暂停的问题，咱们可以通过页面可见性API来解决：当页面隐藏时，切换到setTimeout来维持倒计时；当页面重新显示时，切回requestAnimationFrame，同时修正起始时间戳保证准确性。

// 监听页面可见性变化
function handlePageVisibilityChange() {
    // 先获取当前剩余时间，避免切换时丢失状态
    const elapsedSeconds = Math.floor((Date.now() - countdownStartTime) / 1000);
    const remainingSeconds = Math.max(totalCountdownSeconds - elapsedSeconds, 0);

    if (document.hidden) {
        // 页面隐藏时，用setTimeout替代requestAnimationFrame
        cancelAnimationFrame(timerHandler);
        timerHandler = setTimeout(function tick() {
            updateCountdownDisplay();
            // 如果页面还在隐藏且倒计时未结束，继续触发setTimeout
            if (document.hidden && remainingSeconds > 0) {
                timerHandler = setTimeout(tick, 1000);
            }
        }, 1000);
    } else {
        // 页面显示时，切回requestAnimationFrame，并修正起始时间
        clearTimeout(timerHandler);
        // 重新计算起始时间：当前时间减去已经流逝的时间，保证剩余时间准确
        countdownStartTime = Date.now() - (totalCountdownSeconds - remainingSeconds) * 1000;
        timerHandler = requestAnimationFrame(updateCountdownDisplay);
    }
}

// 为IE11及现代浏览器添加可见性监听
document.addEventListener('visibilitychange', handlePageVisibilityChange);

兼容IE11的requestAnimationFrame #

IE11对requestAnimationFrame的支持需要前缀，咱们加个简单的polyfill：

// 兼容IE11的requestAnimationFrame和cancelAnimationFrame
if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = window.msRequestAnimationFrame ||
        function(callback) {
            // 近似60fps的间隔，和标准requestAnimationFrame对齐
            return setTimeout(callback, 16);
        };
}

if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = window.msCancelAnimationFrame || clearTimeout;
}

最后启动倒计时 #

在页面加载完成后调用启动函数：

// 启动倒计时
window.addEventListener('load', function() {
    updateCountdownDisplay();
});

这样一来，不管用户在IE11里右键打开菜单，还是把浏览器最小化，倒计时都能保持准确，而且前台用requestAnimationFrame还能保证动画的流畅性。

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