如何在执行JavaScript长耗时函数前向用户展示提示消息

JavaScript在浏览器中运行于单主线程，且该线程与页面渲染线程互斥。你当前代码中所有逻辑都是同步执行：

• 调用show_message("starting")仅会将DOM修改提交到渲染队列，不会立刻触发页面重绘
• 后续同步执行的this_function_takes_forever()会一直占用主线程，导致渲染队列中的更新任务始终无法执行
• 直到长耗时函数执行完成，主线程空闲后，浏览器才会一次性处理所有累积的渲染更新，因此你只会看到最终的done提示，且过程中页面完全无响应。

方案1：延迟执行长耗时函数（轻量适配） #

利用setTimeout将长耗时函数放到宏任务队列执行，给浏览器留出时间先渲染starting的提示：

document.getElementById("button").addEventListener("click", function (){
    show_message("starting");
    // 0毫秒延迟仅代表将任务加入队列，等待当前主线程清空（含渲染任务）后执行
    setTimeout(() => {
        this_function_takes_forever();
        show_message("done");
    }, 0);
});

注意：该方案仅能保证启动提示优先展示，长耗时函数执行期间页面仍会处于冻结状态。

方案2：Web Worker异步执行（最优解，无卡顿） #

如果你的长耗时函数是计算密集型逻辑，不需要操作DOM、不依赖主线程上下文，可将其放到Web Worker后台线程执行，完全不阻塞主线程的UI渲染：

主线程代码 #

document.getElementById("button").addEventListener("click", function (){
    show_message("starting");
    // 初始化Worker线程
    const longTaskWorker = new Worker('long-task.js');
    // 向Worker发送启动信号
    longTaskWorker.postMessage('start');
    // 监听Worker的返回结果
    longTaskWorker.onmessage = function(e) {
        if(e.data === 'finished') {
            show_message("done");
            longTaskWorker.terminate(); // 销毁Worker
        }
        // 额外支持实时接收进度更新
        // if(e.data.type === 'progress') update_progress(e.data.percent)
    }
});

long-task.js（Worker线程文件） #

// 监听主线程的启动信号
self.onmessage = function(e) {
    if(e.data === 'start') {
        // 此处放置你的长耗时逻辑
        this_function_takes_forever();
        // 执行完成通知主线程
        self.postMessage('finished');
    }
}

该方案执行过程中主线程完全空闲，页面不会出现冻结，还可以新增进度提示交互。

方案3：拆分长耗时任务 #

如果你的长耗时逻辑可以拆分为多个小步骤，可通过requestAnimationFrame或requestIdleCallback分批执行，每次执行一小段后归还主线程给渲染任务，避免页面冻结：

document.getElementById("button").addEventListener("click", async function (){
    show_message("starting");
    // 将长任务拆分为N个小任务，分批执行
    const taskChunks = split_long_task_into_chunks(this_function_takes_forever);
    for(let i=0; i<taskChunks.length; i++) {
        await new Promise(resolve => requestAnimationFrame(() => {
            taskChunks[i]();
            // 可更新进度：show_progress((i+1)/taskChunks.length * 100)
            resolve();
        }))
    }
    show_message("done");
});

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