没有setTimeout 0，不理解堆栈

Posted 2021-04-14

我有一个关于堆栈和setTimeout 0的问题。上面的代码产生了所需的输出，但我不明白为什么没有设置超时为0“....计算”不输出。因为我认为即使没有超时，堆栈上的“....计算”然后转到函数countUp和for循环，如果这个完成则会写“准备再次计算”但为什么不没有setTimeout 0会发生这种情况吗？

function countUp() {
    var result;
    for (var i = 0; i < 1000000000; i++) {
        result = i;
    }
    document.getElementById('status').innerText = 'Ready To Calculate Again';
}

function callback() {
    document.getElementById('status').innerText = '...calculating';
    var wait = window.setTimeout(function() {
        countUp();
    }, 0);
}

document.getElementById('button').addEventListener('click', callback);

答案

浏览器在事件队列中的任务之间进行重排和重新绘制如果在没有setTimeout的情况下调用countUp，则将在回调任务的范围内调用countUp，因此在countUp完成后将在浏览器中重绘。因此，您将立即获得“...计算”和“准备再次计算”。但它们应该在不同的时刻显示出来。因此，为了允许浏览器进行重绘和显示...计算我们将事件队列中的countUp调用作为与setTimeout分开的任务。