如何在单个文件中实现JavaScript耗时代码与主线程并行执行（含TeaVM Java转JS多线程模拟场景）

JavaScript是单线程语言，但我们可以利用事件循环机制把长任务拆分成多个小任务，让主线程和模拟的"异步"任务交替执行，既避免页面冻结，又能实现你想要的并行效果。核心思路是：每次执行一小段工作后，把剩余任务放到事件队列，给主线程留出处理其他任务的时间。

基础场景：让两个任务交替打印日志 #

针对你提供的work和seqWork函数，我们可以封装一个通用的任务拆分函数，把大任务切成小批次执行，用setTimeout(0)把剩余工作调度到下一个事件循环tick：

// 通用函数：把任务拆分成小批次执行，每次执行后让出执行权
function runInChunks(taskFn, batchSize = 100) {
    function executeBatch() {
        let completed = false;
        // 执行当前批次的任务
        for (let i = 0; i < batchSize; i++) {
            completed = taskFn();
            if (!completed) break;
        }
        // 如果任务没完成，调度下一批次
        if (completed) setTimeout(executeBatch, 0);
    }
    executeBatch();
}

// 改造异步任务：每次执行一次打印，返回是否需要继续
let asyncCount = 0;
function work() {
    if (asyncCount >= 100000) return false;
    console.log("Async");
    asyncCount++;
    return true;
}

// 改造主线程任务：同样拆分成小批次避免冻结
let seqCount = 0;
function seqWork() {
    if (seqCount >= 100000) return false;
    console.log("Sequential");
    seqCount++;
    return true;
}

// 启动两个任务
runInChunks(work);
runInChunks(seqWork);

运行这段代码后，你会看到Sequential和Async日志交替出现，且页面不会冻结——因为每个批次执行完后都会让出执行权，事件循环会交替处理两个任务的下一批次。

针对TeaVM的Java多线程模拟方案 #

你的核心痛点是TeaVM把Java Thread直接转换成同步的run()调用，导致多线程逻辑失效。我们可以通过在Java代码中插入yield语句，结合JS的事件循环来模拟线程切换，且不需要修改生成的JS代码结构。

步骤1：在Java中定义yield方法（嵌入JS代码） #

利用TeaVM的@JavaScriptBody注解，定义一个可以让出执行权的原生方法：

import org.teavm.jso.JavaScriptBody;

public class ThreadUtils {
    @JavaScriptBody(script = "window.yieldCurrentThread();")
    public static native void yield();
}

步骤2：在Java线程代码中插入yield #

修改你的Java线程逻辑，在循环或合适的位置调用ThreadUtils.yield()，主动让出执行权：

public class MyThread extends Thread {
    @Override
    public void run() {
        for (int i = 0; i < 100000; i++) {
            System.out.println("Async");
            // 让出执行权，让其他线程有机会执行
            ThreadUtils.yield();
        }
    }
}

步骤3：实现JS的线程调度逻辑 #

在JS中实现yieldCurrentThread和线程管理器，用生成器函数模拟协程，实现线程的暂停与恢复：

// 全局线程管理器：负责调度所有模拟线程
const threadManager = {
    threads: [],
    isScheduling: false,

    // 注册线程：把Java的run函数包装成可暂停的生成器
    registerThread(runFn) {
        const generator = (function*() {
            // 定义全局的yield函数，供Java代码调用
            window.yieldCurrentThread = () => {
                // 抛出特殊信号触发生成器暂停
                throw new Error('YIELD_SIGNAL');
            };
            try {
                runFn();
            } catch (e) {
                if (e.message === 'YIELD_SIGNAL') {
                    // 暂停线程，等待下一次调度
                    yield;
                    // 恢复执行当前线程
                    generator.next();
                } else {
                    throw e;
                }
            }
        })();
        this.threads.push(generator);
        // 如果还没开始调度，启动调度循环
        if (!this.isScheduling) this.startScheduling();
    },

    // 启动调度循环：交替执行每个线程的一个步骤
    startScheduling() {
        this.isScheduling = true;
        const scheduleNext = () => {
            if (this.threads.length === 0) {
                this.isScheduling = false;
                return;
            }
            // 取出队列头部的线程，执行一步
            const thread = this.threads.shift();
            const result = thread.next();
            // 如果线程未完成，放回队列尾部
            if (!result.done) this.threads.push(thread);
            // 调度下一次线程切换
            setTimeout(scheduleNext, 0);
        };
        scheduleNext();
    }
};

// 重写TeaVM生成的Thread.start方法，替换为我们的调度逻辑
const originalStart = Thread.prototype.start;
Thread.prototype.start = function() {
    threadManager.registerThread(() => this.run());
};

原理说明 #

1. 当Java线程调用ThreadUtils.yield()时，会触发JS的yieldCurrentThread函数，抛出特殊信号让生成器暂停。
2. 线程管理器会把当前线程移到队列尾部，然后调度下一个线程执行。
3. 每个线程每次只执行到yield就暂停，所有线程会交替执行，完美模拟Java多线程的切换效果。
4. 所有操作都在主线程完成，但通过事件循环调度，不会冻结页面，且不需要额外的脚本文件。

关键注意事项 #

• 批次大小调整：batchSize可以根据实际情况调整，建议在100-1000之间测试——太小会增加调度开销，太大可能导致短暂冻结。
• TeaVM适配：如果TeaVM生成的Thread类结构不同，只需微调Thread.prototype.start的重写逻辑，核心思路不变。
• 无侵入性：你不需要修改生成的JS代码，只需在Java中插入yield语句即可实现线程切换。

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