为何confirm()先触发？JS修改元素边框颜色滞后问题解析

问题场景 #

想要实现点击元素后，先把元素高亮（修改边框颜色），再弹出确认框，用户确认后删除元素。但直接编写代码时，confirm()弹窗会先触发，元素的边框颜色根本来不及变化，只有给confirm()套个1ms的setTimeout才能达到预期效果。

用到的CSS代码 #

.test-box {
    border: 2px solid black;
    height: 200px;
    width: 200px;
    cursor: pointer;
}

无效的JS代码（弹窗先出现） #

document.addEventListener('DOMContentLoaded', () => {
    const testBox = document.createElement('div')
    testBox.className = "test-box"
    document.body.append(testBox)
    
    testBox.addEventListener('click', () => {
        // 尝试高亮元素
        testBox.style.border = "2px solid yellow"
        // 弹出确认框
        const confirmation = confirm("Delete testBox?")
        if (confirmation) {
            testBox.remove()
        } else {
            // 取消高亮
            testBox.style.border = "2px solid black"
        }
    })
})

有效的JS代码（加1ms setTimeout） #

document.addEventListener('DOMContentLoaded', () => {
    const testBox = document.createElement('div')
    testBox.className = "test-box"
    document.body.append(testBox)
    
    testBox.addEventListener('click', () => {
        // 高亮元素
        testBox.style.border = "2px solid yellow"
        // 延迟执行确认框
        setTimeout(() => {
            const confirmation = confirm("Delete testBox?")
            if (confirmation) {
                testBox.remove()
            } else {
                testBox.style.border = "2px solid black"
            }
        }, 1)
    })
})

现象背后的原理 #

这和浏览器的事件循环与渲染机制直接相关：

• 浏览器不会在JS代码执行过程中实时渲染页面样式。当你修改元素样式时，浏览器会把这次变更加入渲染队列，等待当前正在执行的宏任务（也就是点击事件的回调函数）全部跑完，才会统一处理渲染更新。
• 但confirm()是个阻塞式的原生API，它会立刻暂停当前JS代码的执行，同时直接抢占主线程弹出弹窗——这就导致渲染队列里的边框样式变更还没来得及被处理，弹窗就先出来了，自然看不到高亮效果。
• 而setTimeout(callback, 1)会把回调里的代码放到下一个宏任务队列中。当前的点击回调执行完后，浏览器会先处理渲染队列，完成元素的高亮渲染，之后才会执行下一个宏任务里的confirm()，这样就能先看到高亮再弹出确认框了。

是否是最优解决方案？ #

用1ms的setTimeout确实能解决问题，但还有更贴合浏览器机制的方案：使用requestAnimationFrame。

requestAnimationFrame的回调函数会在浏览器下一次重绘前执行，能确保之前的样式变更已经被渲染到页面上，比setTimeout更可靠（不会出现极端情况下1ms不够的问题，完全和渲染周期同步）。

优化后的代码：

document.addEventListener('DOMContentLoaded', () => {
    const testBox = document.createElement('div')
    testBox.className = "test-box"
    document.body.append(testBox)
    
    testBox.addEventListener('click', () => {
        testBox.style.border = "2px solid yellow"
        // 等待浏览器完成渲染后再弹确认框
        requestAnimationFrame(() => {
            const confirmation = confirm("Delete testBox?")
            if (confirmation) {
                testBox.remove()
            } else {
                testBox.style.border = "2px solid black"
            }
        })
    })
})

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