一个有关js回调函数问题

一段js代码
调用了两次asum，也就是调用了两次回调函数
两秒后输出到页面上新内容
但是实际执行的时候最后页面上的内容是37
而不是7
为什么第二次调用没有覆盖3，而是同时执行？？？

function asum(a, b, callback) {
    const r = a + b;
    setTimeout(function () {
        callback(r);
    }, 2000);
}


var v = function(r){
document.write("888<br>")
}
asum(1, 2, v);
asum(3,4,x => {document.write(x)})

document.write(6)

文档流关闭后不要document.write，会覆盖当前页面所有的内容，改为document.body.innerHTML+=

    function asum(a, b, callback) {
        const r = a + b;
        setTimeout(function () {
            callback(r);
        }, 2000);
    }


    var v = function(r){
        document.body.innerHTML+=("888<br>")
    }
    asum(1, 2, v);
    asum(3,4,x => {document.body.innerHTML+=(x)})

    document.write(6)

按正常执行流程document.write()会覆盖之前的内容
所以我的输出结果应该是只有7
但其实最后页面留下的内容却是37
这表示我两次调用asum同时执行了回调函数，文档流没有覆盖之前的内容。
我想知道为什么没有覆盖？