異步與回調(diào)

NusterCache 發(fā)布于2019-08-26 12:00 / 2397人閱讀

摘要：例子下面的程序，，，，它會按照順序從上往下的順序執(zhí)行，就是同步。

異步

我對異步的理解：

異步是不等結(jié)果，往下執(zhí)行；同步是等結(jié)果出現(xiàn)后，再往下執(zhí)行

代碼中出現(xiàn)異步程序時，如例2中，執(zhí)行順序就會發(fā)生變化

使用回調(diào)，就是讓執(zhí)行順序不會發(fā)生變化

但這肯定不是異步要表達的意思，因為下面的例子是完全是異步的負面效果，那異步到底有啥作用？

下面的例子是解決異步帶來的問題，而非異步的優(yōu)點。

例子：

1、下面的程序f1()，f2()，...，f5()，它會按照順序從上往下的順序執(zhí)行，就是同步。

f1 =function(){console.log(1)}
f2 =function(){console.log(2)}
f3 =function(){console.log(3)}
f4 =function(){console.log(4)}
f5 =function(){console.log(5)}

f1()
f2()
f3()
f4()
f5()

2、假如f1()是個異步函數(shù)，它的執(zhí)行順序就會發(fā)生變化f2()，...，f5()，f1()

f1 =function(){
    setTimeout(function(){
        console.log(1)
    },10)
}
f2 =function(){console.log(2)}
f3 =function(){console.log(3)}
f4 =function(){console.log(4)}
f5 =function(){console.log(5)}

f1()
f2()
f3()
f4()
f5()

3、這不是我們想要的結(jié)果，我們想要的結(jié)果是f1()、f2()依次運行，就需要使用回調(diào)函數(shù)，定義是將函數(shù)A作為參數(shù)，傳入函數(shù)B

f1 =function(fn){
    setTimeout(function(){
        console.log(1)
        fn.call()
    },10)
}
f2 =function(fn){console.log(2);fn.call()}
f3 =function(fn){console.log(3);fn.call()}
f4 =function(fn){console.log(4);fn.call()}
f5 =function(fn){console.log(5);fn.call()}

f1(()=>{
    f2(()=>{
        f3(()=>{
            f4(()=>{
                f5()
            })
        })
    })
})

4、或者使用Promise，更能體現(xiàn)執(zhí)行的順序

f1 =function(){
    return new Promise(function(resolve){
        setTimeout(function(){
            console.log(1)
            resolve.call()
    },10)
    })
}
f2 =function(){console.log(2)}
f3 =function(){console.log(3)}
f4 =function(){console.log(4)}
f5 =function(){console.log(5)}

f1().then(f2).then(f3).then(f4).then(f5)

回調(diào)

把函數(shù) A 作為參數(shù)傳入函數(shù) B 中

function async(f1, f2) {
    setTimeout(function() {
        f1.call();
        f2.call();
    }, 0);
}
function foo(){
    console.log("foo");
}
function bar(){
    console.log("bar");
}

console.log("異步開始");
async(foo, bar)
console.log("異步結(jié)束");

//打印結(jié)果：
//異步開始
//異步結(jié)束
//foo
//bar