一个有关js回调函数问题

Question

一段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)

Answer 1

文档流关闭后不要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)