鍍金池/ 問答/Java  Linux  網(wǎng)絡(luò)安全  HTML/ setTimeout 多層回調(diào)函數(shù)嵌套的疑惑

setTimeout 多層回調(diào)函數(shù)嵌套的疑惑

本人新手, 在學(xué)習(xí)javascript的異步時(shí)遇到了點(diǎn)疑慮, 如下:
在看阮一峰老師的教程里面有這樣一段實(shí)例代碼:

var async = function(arg, callback) {
    console.log(`參數(shù)為${arg}, 一秒后返回結(jié)果`)
    setTimeout(function() {
        callback(arg * 2)
    }, 1000)
}

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

輸出結(jié)果如下:

clipboard.png

不是特別理解整個(gè)多層回調(diào)的運(yùn)行機(jī)制, 貌似傳進(jìn)去的參數(shù)在每次執(zhí)行setTimeout的時(shí)候都會(huì)被'記住', 但是該怎么理解這段代碼, 總是感覺特別繞.

希望能有前輩能幫忙解答, 謝謝

回答
編輯回答
柒槿年

就是個(gè)回調(diào)的過程

var async = function(arg, callback) {
    console.log(`參數(shù)為${arg}, 一秒后返回結(jié)果`)
    setTimeout(function() {
        callback(arg * 2)
    }, 1000)
}

async(1, function(value){  //第一層延時(shí)1秒回調(diào)value為2
    async(value, function(value){ // 第二次將vaule = 2 作為參數(shù)再執(zhí)行函數(shù)，延時(shí)一秒回調(diào)，此時(shí)value為4
        async(value, function(value){ // 第三次將vaule = 4 再次作為參數(shù)再執(zhí)行函數(shù)，延時(shí)一秒回調(diào)，此時(shí)value為8 所以輸出就為8
            console.log('完成: ', value)
        })
    })
})
大概就是這樣，理理思路就能看懂，不難的
2017年9月9日 07:16