为什么当javascript之前的javascript更改元素的边框颜色时，确认()首先发生？

Question

我想简单地删除一个HTML元素时，通过JavaScript点击它，并在用户提供确认后。

单击后，但在确认之前，我希望该元素被高亮显示(有不同的边框颜色)。但是，在下面的代码中，确认发生在边框颜色更改之前。

css：

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

联署材料：

document.addEventListener('DOMContentLoaded', () => {
            const testBox = document.createElement('div')
            testBox.className = "test-box"
            document.body.append(testBox)
            // Remove testBox when clicked
            testBox.addEventListener('click', () => {
                // Highlight testBox to be deleted
                testBox.style.border = "2px solid yellow"
                // Confirm deletion
                const confirmation = confirm("Delete testBox?")
                if (confirmation) {
                    testBox.remove()
                } else {
                    // Remove highlight
                    testBox.style.border = "2px solid black"
                }
            })
        })

让它按需要工作的唯一方法是在确认中添加一个1ms超时，如下所示：

document.addEventListener('DOMContentLoaded', () => {
            const testBox = document.createElement('div')
            testBox.className = "test-box"
            document.body.append(testBox)
            // Remove testBox when clicked
            testBox.addEventListener('click', () => {
                // Highlight testBox to be deleted
                testBox.style.border = "2px solid yellow"
                // Delay confirmation so that highlight will happen before confirmation
                setTimeout(() => {
                    // Confirm deletion
                    const confirmation = confirm("Delete testBox?")
                    if (confirmation) {
                        testBox.remove()
                    } else {
                        // Remove highlight
                        testBox.style.border = "2px solid black"
                    }
                }, 1)
            })
        })

这是最好的方法吗？我想知道发生了什么。

Answer 1

对DOM的更新不是即时的，确实需要一些时间才能完成。在本例中，您的更新发生在setTimeout()函数等待的1ms内，然后启动对confirm()的调用。这就是延迟函数调用的原因。没有setTimeout，Javascript线程在DOM完成更新之前调用confirm。这的文章很好地解释了正在发生的事情以及您可以做些什么来避免它。

Answer 2

confirm、alert和input阻止JavaScript引擎处理浏览器的事件队列，该队列将包括油漆作业。

允许执行画图循环的一种方法是使用requestAnimationFrame：它将在画图作业之前执行给定的回调，如果再次调用requestAnimationFrame，该回调将在该油漆作业之后，在下一次调用之前调用。您可以使用此行为来解决下一个油漆周期后的承诺。将事件处理程序定义为async，并等待该承诺：

​

const paintCycle = () => new Promise(resolve =>
    requestAnimationFrame(() => requestAnimationFrame(resolve))
);

const testBox = document.createElement('div')
testBox.className = "test-box"
document.body.append(testBox)
// Remove testBox when clicked
testBox.addEventListener('click', async () => {
    // Highlight testBox to be deleted
    testBox.style.border = "2px solid yellow"
    await paintCycle();
    // Confirm deletion
    const confirmation = confirm("Delete testBox?")
    if (confirmation) {
        testBox.remove()
    } else {
        // Remove highlight
        testBox.style.border = "2px solid black"
    }
})

.test-box:after {
    content: "click me"
 }

​

Answer 3

因为：

• JavaScript是单线程的.
• 在阻塞操作完成之前，不会对UI进行更新。
• confirm()是一种阻塞操作。

如果您想要使用confirm()，那么您想出的方法对于您想要实现的UX来说是一个合理的解决方案。一种更现代和干净的方法是根本不使用confirm() (或alert()或prompt())，并在页面中构建一个模态确认对话框。(或者使用第三方一党，其中有很多。)