JavaScript 异步延迟替代同步阻塞wait 实现div定时更新伪幻灯片

当前实现的DOM冻结，核心是你写的wait函数是同步阻塞逻辑：JS是单线程运行的，一旦进入死循环计时，整个主线程会被完全占满，浏览器没法在循环过程中执行DOM绘制、用户交互响应等操作，只能等整个循环全部跑完，才会一次性执行所有DOM更新，完全达不到逐次间隔展示的伪幻灯片效果。

可替代的非阻塞异步等待方案 #

浏览器环境不存在合法的同步阻塞等待API，所有不卡主线程的等待逻辑都是基于事件循环的异步调度实现，主要有两类适配你当前场景的实现方式：

方案1：Promise封装的可异步等待函数（和原代码逻辑结构最匹配） #

先替换掉原来的死循环wait函数，做成可被await调用的异步版本，完全不阻塞主线程：

// 非阻塞异步等待，等待期间主线程完全交给浏览器处理渲染和交互
function wait(ms) {
    return new Promise(resolve => {
        setTimeout(resolve, ms);
    });
}

配合async/await语法改造主逻辑，几乎可以保留你原来的循环代码结构，不需要做大幅重构：

window.addEventListener("load", function(){
    runDisplay();
});

async function runDisplay() {
    const rotations = 2;  
    const teams = '1,4,2,3';
    const res = teams.split(",");
    const arrayLength = res.length;
    const displayEl = document.getElementById("TeamDisplay");

    // 原有双层循环逻辑保留，仅把同步等待换成await异步等待
    for (let r = 0; r <= rotations; r++) {
        for (let i = 0; i < arrayLength; i++) {
            displayEl.innerHTML = res[i];
            // 等待指定间隔（按你需求设为15000即15秒），这一步会主动让出主线程
            await wait(15000);
        }
    }

    // 所有轮次完成后的收尾逻辑（比如页面刷新）可以直接写在这里
}

这个实现的效果是：每间隔15秒正常更新一次div内容，等待期间浏览器可以正常响应滚动、点击等交互，不会出现冻结。

方案2：纯setTimeout链式调度（零语法兼容要求） #

如果需要兼容不支持async/await的老旧环境，可以直接用setTimeout做步骤调度，不需要依赖Promise和异步语法：

window.addEventListener("load", function(){
    runDisplay();
});

function runDisplay() {
    const rotations = 2;  
    const teams = '1,4,2,3';
    const res = teams.split(",");
    const displayEl = document.getElementById("TeamDisplay");

    let currentRotation = 0;
    let currentIndex = 0;

    function runStep() {
        // 更新展示内容
        displayEl.innerHTML = res[currentIndex];
        currentIndex++;

        // 一轮遍历完就重置索引、增加轮次计数
        if (currentIndex >= res.length) {
            currentIndex = 0;
            currentRotation++;
        }

        // 没达到最大轮次就调度下一次更新
        if (currentRotation <= rotations) {
            setTimeout(runStep, 15000);
        } else {
            // 轮次完成后的收尾逻辑
        }
    }

    // 启动第一次内容更新
    runStep();
}

注意事项 #

• 不要在主线程使用任何依靠死循环计时的等待逻辑，哪怕是几百毫秒的短等待，都会打断浏览器的正常渲染节奏，造成交互卡顿
• 异步等待的核心是主动把主线程让还给浏览器，留出执行DOM绘制、交互响应的时间片，这样才能实现逐次更新的幻灯片效果，而不是等全部逻辑跑完一次性渲染最终状态

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