函数运行时屏幕不更新，加载GIF无法显示问题求助

浏览器的JS执行与UI渲染共用同一个主线程，同步运行的长时间代码会直接阻塞渲染进程。你调用$('#loading-container').show()后，浏览器还没来得及完成UI更新，耗时算法就立刻启动，执行完毕又马上调用hide()，导致加载GIF根本没机会展示在屏幕上。而添加setTimeout后，hide()被放到宏任务队列，主线程先完成UI渲染，算法执行完后等待超时才隐藏，所以能正常看到GIF。

1. 用setTimeout延迟算法执行，给UI渲染留时间 #

把耗时算法放到setTimeout回调里，让浏览器先完成show()的UI更新，再执行算法。无需固定超时时间，就能保证GIF正常显示：

function mycode() {
    $('#loading-container').show();
    // 将耗时代码放入setTimeout，优先让UI完成渲染
    setTimeout(function() {
        // 这里写你的5秒耗时算法
        // 算法执行完成后隐藏加载容器
        $('#loading-container').hide();
    }, 0); // 0毫秒延迟是让浏览器先处理当前渲染任务，再执行回调
}

2. 用requestAnimationFrame精准匹配渲染时机 #

如果需要更精准的渲染时机，使用requestAnimationFrame，它会在浏览器下一次重绘前执行回调，确保show()的UI变化已经生效：

function mycode() {
    $('#loading-container').show();
    requestAnimationFrame(function() {
        // 此时UI已完成渲染，执行耗时算法
        // do lots of code
        $('#loading-container').hide();
    });
}

3. 拆分长算法为多个小块（可选） #

如果你的算法可以拆分成独立小任务，用setTimeout分块执行，让浏览器有间隙处理UI渲染，避免页面完全卡死：

function mycode() {
    $('#loading-container').show();
    // 假设算法拆分为5个独立步骤
    const steps = [step1, step2, step3, step4, step5];
    let currentStep = 0;

    function runNextStep() {
        if (currentStep >= steps.length) {
            // 所有步骤完成，隐藏加载容器
            $('#loading-container').hide();
            return;
        }
        // 执行当前步骤
        steps[currentStep]();
        currentStep++;
        // 延迟执行下一个步骤，给UI渲染留时间
        setTimeout(runNextStep, 0);
    }

    // 启动分步执行
    runNextStep();
}

// 示例步骤函数
function step1() { /* 部分算法逻辑 */ }
function step2() { /* 部分算法逻辑 */ }
// ...其他步骤

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