setTimeout 多层回调函数嵌套的疑惑

Question

本人新手, 在学习javascript的异步时遇到了点疑虑, 如下:
在看阮一峰老师的教程里面有这样一段实例代码:

var async = function(arg, callback) {
    console.log(`参数为${arg}, 一秒后返回结果`)
    setTimeout(function() {
        callback(arg * 2)
    }, 1000)
}

async(1, function(value){
    async(value, function(value){
        async(value, function(value){
            console.log('完成: ', value)
        })
    })
})

输出结果如下:

不是特别理解整个多层回调的运行机制, 貌似传进去的参数在每次执行setTimeout的时候都会被'记住', 但是该怎么理解这段代码, 总是感觉特别绕.

希望能有前辈能帮忙解答, 谢谢

Answer 1

就是个回调的过程

var async = function(arg, callback) {
    console.log(`参数为${arg}, 一秒后返回结果`)
    setTimeout(function() {
        callback(arg * 2)
    }, 1000)
}

async(1, function(value){  //第一层延时1秒回调value为2
    async(value, function(value){ // 第二次将vaule = 2 作为参数再执行函数，延时一秒回调，此时value为4
        async(value, function(value){ // 第三次将vaule = 4 再次作为参数再执行函数，延时一秒回调，此时value为8 所以输出就为8
            console.log('完成: ', value)
        })
    })
})
大概就是这样，理理思路就能看懂，不难的