JavaScript执行CPU密集函数前显示等待Modal不生效问题求助

JavaScript 主线程是单线程运行的，UI 渲染和 JS 代码执行共享同一个线程，同一时间只能做一件事。
你给 modal 加上 is-open 类后，浏览器不会立刻更新 UI，而是会等当前同步代码全部执行完成后，再进入重绘/重排阶段更新页面。但你紧接着执行了耗时 3-4 秒的 CPU 密集函数，直接阻塞了主线程，UI 渲染任务被压在队列里无法执行。等耗时函数执行完成，主线程才会处理 UI 更新，而此时你已经又调用了一次 toggle 把 is-open 类移除了，所以用户看不到遮罩层展示。

方案1：快速修复（适合耗时逻辑无DOM操作、不需要频繁调用的场景） #

用 setTimeout 将耗时逻辑放到下一轮事件循环执行，给浏览器留够时间完成遮罩层的渲染：

const btn = document.querySelector('#showModal');
const modal = document.querySelector('.modal');
btn.addEventListener('click', ()=>{
    // 用add代替toggle，避免状态出现错误
    modal.classList.add('is-open');

    // 延时0就可以，作用是把回调放到宏任务队列，等当前同步逻辑+UI渲染完成后再执行
    setTimeout(() => {
        timeTakingFuction();
        // 执行完成后再关闭遮罩
        modal.classList.remove('is-open');
    }, 0);
});

方案2：最优方案（适合CPU密集逻辑复杂、执行时间长的场景） #

使用 Web Worker 开独立后台线程执行耗时逻辑，完全不会阻塞主线程的 UI 渲染，体验更好：

1. 新建单独的 worker 文件 task.worker.js，存放耗时逻辑：

// task.worker.js 内容
function timeTakingFuction() {
    // 把你原来的CPU密集逻辑粘贴到这里
}

self.addEventListener('message', (e) => {
    if(e.data.type === 'start') {
        const result = timeTakingFuction();
        // 执行完成后给主线程发消息
        self.postMessage({type: 'done', result});
    }
});

2. 主线程代码调整为：

const btn = document.querySelector('#showModal');
const modal = document.querySelector('.modal');
// 初始化worker
const computeWorker = new Worker('./task.worker.js');

btn.addEventListener('click', ()=>{
    modal.classList.add('is-open');
    // 通知worker开始执行计算
    computeWorker.postMessage({type: 'start'});
});

// 监听worker执行完成的消息
computeWorker.addEventListener('message', (e) => {
    if(e.data.type === 'done') {
        // 可以在这里拿e.data.result使用计算结果
        modal.classList.remove('is-open');
    }
});

注意：Web Worker 线程无法访问 DOM、window 对象，如果你的耗时逻辑包含 DOM 操作，需要把 DOM 相关逻辑剥离到主线程处理，再用方案1实现。

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