JavaScript如何安全向运行中的函数发送消息解决主线程阻塞问题

API 探路者

2026-10-1

问题根因分析

浏览器的JavaScript运行在单线程事件循环模型中，所有同步任务会阻塞后续事件、渲染、定时器的调度执行。你触发mousedown事件后进入的空while循环会完全占满主线程，浏览器没有空闲时间执行mouseup的回调函数，foo的值永远不会被修改为1，循环自然无法退出。
你猜测的JIT编译优化确实也存在：单线程环境下未做特殊标记的变量，编译器会优化掉重复的读操作，直接复用寄存器中的缓存值，就算有修改逻辑也无法读到最新值。

可行实现方案

方案1：事件驱动直接实现（最优，无额外开销）

你的需求本质是监听「鼠标按下后抬起」的动作，直接通过事件组合就能实现，不需要轮询：

let isMouseDown = false
window.onmousedown = () => {
  isMouseDown = true
}
window.onmouseup = () => {
  if (isMouseDown) {
    console.log("bar")
    isMouseDown = false
  }
}

方案2：异步轮询替代同步死循环

如果需要保留轮询判断的逻辑，用requestAnimationFrame实现异步轮询，不会阻塞主线程：

var foo = 0
window.onmouseup = function(){
    foo = 1
}
window.onmousedown = function(){
    foo = 0
    // 异步轮询不占用主线程
    function checkFoo() {
        if(foo === 1) {
            console.log("bar")
            return
        }
        requestAnimationFrame(checkFoo)
    }
    checkFoo()
}

方案3：Promise封装异步等待逻辑

如果需要后续逻辑按顺序书写，可以用Promise包装等待逻辑，可读性更高：

window.onmousedown = async () => {
    // 等待mouseup事件触发
    await new Promise(resolve => {
        const handleUp = () => {
            window.removeEventListener('mouseup', handleUp)
            resolve()
        }
        window.addEventListener('mouseup', handleUp)
    })
    console.log("bar")
}

额外注意事项