如何在JavaScript的loop运行期间同时执行interval或其他函数？

首先明确问题根因：浏览器端的JavaScript默认运行在单线程的主线程上，遵循事件循环执行规则。所有同步执行的代码会阻塞主线程，只有当前同步任务执行完毕后，才会处理任务队列中待执行的setInterval回调、DOM渲染等任务，因此你写的长for循环会卡住计时逻辑。另外你原代码里setTimeout(reallystart(),0)的写法有问题，这里会直接执行reallystart函数，不是把函数作为回调传给setTimeout，正确写法是setTimeout(reallystart, 0)，但即使修正这个问题，长同步循环还是会阻塞interval执行。

下面是三种可行的解决方案：

方案1：长循环分片异步执行 #

把连续的长循环拆成多个小任务分片执行，每次执行完一个分片就主动让出主线程给其他任务（比如interval回调）执行，平衡性能和执行效率：

let result = document.getElementById('result')
let time = document.getElementById('time')
let i = 0
// 每次执行100次循环，可根据实际场景调整分片大小
const CHUNK_SIZE = 100
const TOTAL = 10000

function start(){
  setInterval(function(){
    time.textContent = parseFloat(time.textContent)+1
  },1000)
  reallystart()
}

function reallystart(){
  // 执行当前分片的循环
  let end = Math.min(i + CHUNK_SIZE, TOTAL)
  for(;i < end;i++){
    result.innerHTML +=i
  }
  // 还没跑完就交给下一个事件循环周期继续跑
  if(i < TOTAL){
    setTimeout(reallystart, 0)
  }
}

HTML代码和你原有示例完全一致即可。

方案2：使用Web Worker跑长循环 #

Web Worker可以在独立于主线程的后台线程运行JS代码，完全不会阻塞主线程的interval、DOM操作等逻辑，适合处理计算密集型的长任务：

let result = document.getElementById('result')
let time = document.getElementById('time')

function start(){
  setInterval(function(){
    time.textContent = parseFloat(time.textContent)+1
  },1000)
  
  // 创建Worker，代码内联不需要单独引入JS文件
  const workerCode = `
    for(let i =0;i<10000;i++){
      // 把计算结果发回主线程
      self.postMessage(i)
    }
  `
  const blob = new Blob([workerCode], {type: 'application/javascript'})
  const worker = new Worker(URL.createObjectURL(blob))
  
  // 接收Worker返回的结果更新DOM
  worker.onmessage = (e) => {
    result.innerHTML += e.data
  }
}

HTML代码和你原有示例完全一致即可。

方案3：用async/await主动让出线程 #

在循环里按规则加极短的延时主动让出主线程，让其他待执行任务有机会运行，写法最简单：

let result = document.getElementById('result')
let time = document.getElementById('time')

function start(){
  setInterval(function(){
    time.textContent = parseFloat(time.textContent)+1
  },1000)
  reallystart()
}

async function reallystart(){
  for(let i =0;i<10000;i++){
    result.innerHTML +=i
    // 每100次让出一次线程，避免频繁延时导致性能损耗过高
    if(i % 100 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0))
    }
  }
}

HTML代码和你原有示例完全一致即可。

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