如何在JavaScript中通过event loop或web worker实现双任务同时运行

1 核心前提 #

• JavaScript主线程是单线程运行的，同步执行的大循环会占用主线程，导致定时器、UI渲染等所有其他任务全部阻塞，这是问题的根本原因。

2 Event Loop方案说明 #

2.1 关于queue的疑问 #

你看到的示例是事件循环的原理伪代码，queue是浏览器JS运行时内部维护的消息队列，用来存放待执行的异步任务，这个变量不会暴露给业务代码，你自然无法直接调用。

2.2 实际实现思路 #

把大循环拆成多个小批次执行，每执行一个批次就把控制权交回事件循环，让定时器、UI更新有机会执行。你之前写的setTimeout(reallystart(),0)逻辑错误，加括号会直接同步执行reallystart函数再把返回值传给setTimeout，等于还是会阻塞主线程。

2.3 修正后的可运行代码 #

<button onclick='start()'>Click</button>
<div id='result'></div>
<div id='time'>0</div>
<script>
let result = document.getElementById('result')
let time = document.getElementById('time')
let interval;
// 每次循环处理的批次大小，可根据实际场景调整
const BATCH_SIZE = 100;
const TOTAL_COUNT = 10000;

function start(){
  interval = setInterval(function(){
    time.textContent = parseFloat(time.textContent)+1
  },1000)
  // 传函数引用，不要加括号直接执行
  setTimeout(() => reallystart(0), 0)
}

function reallystart(startIndex){
  let endIndex = Math.min(startIndex + BATCH_SIZE, TOTAL_COUNT)
  // 单次只执行一个批次的循环
  for(let i = startIndex; i < endIndex; i++){
    result.innerHTML += i
  }
  // 还没跑完就把下一批次放到下一个事件循环执行
  if(endIndex < TOTAL_COUNT){
    setTimeout(() => reallystart(endIndex), 0)
  }else{
    // 跑完了清定时器
    clearInterval(interval)
  }
}
</script>

3 Web Worker方案说明 #

3.1 你代码的问题 #

1. new Worker()的参数必须是Worker脚本的URL，不能直接传页面内的script标签DOM对象，所以会报构造失败的错误。
2. Worker运行在独立线程，无法访问页面DOM，所以大循环逻辑要放在Worker里执行，不能直接在Worker里调用主线程的display函数操作DOM，需要通过postMessage和主线程通信。

3.2 修正后的可运行代码（不需要额外JS文件，用Blob生成Worker脚本） #

<button onclick='startworker()'>Click</button>
<div id='result'></div>
<div id='time'>0</div>
<script>
let result = document.getElementById('result')
let time = document.getElementById('time')
let worker;

// Worker要执行的逻辑，字符串形式后面转成Blob
const workerScript = `
  // Worker内部监听主线程发来的启动消息
  self.onmessage = function(e) {
    let res = ''
    for(let i = 0; i < 10000; i++){
      res += i
    }
    // 跑完把结果发回主线程
    self.postMessage(res)
  }
`
// 生成Blob URL
const blob = new Blob([workerScript], {type: 'application/javascript'})
const workerUrl = URL.createObjectURL(blob)

let startworker = function(){
  // 启动定时器，在主线程跑不会被阻塞
  let interval = setInterval(function(){
    time.textContent = parseFloat(time.textContent)+1
  },1000)

  if(typeof(worker) == 'undefined'){
    worker = new Worker(workerUrl);
    // 监听Worker发回的结果
    worker.onmessage = function(e){
      result.innerHTML = e.data
      // 跑完清定时器
      clearInterval(interval)
    }
  }
  // 给Worker发启动消息
  worker.postMessage('start')
}
</script>

方案选型建议 #

• 如果循环逻辑简单，不想额外维护Worker脚本，选Event Loop拆分批次的方案即可。
• 如果循环计算量极大，拆分批次还是会卡顿，选Web Worker方案，不会占用主线程资源。

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