異步與回調

異步

我對異步的理解：

1. 異步是不等結果，往下執行；同步是等結果出現後，再往下執行
2. 代碼中出現異步程序時，如例2中，執行順序就會發生變化
3. 使用回調，就是讓執行順序不會發生變化

但這確定不是異步要表達的意思，由於下面的例子是徹底是異步的負面效果，那異步到底有啥做用？

下面的例子是解決異步帶來的問題，而非異步的優勢。

例子：

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

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()

二、假如f1()是個異步函數，它的執行順序就會發生變化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()

三、這不是咱們想要的結果，咱們想要的結果是f1()、f2()依次運行，就須要使用回調函數，定義是將函數A做爲參數，傳入函數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()
            })
        })
    })
})

四、或者使用Promise，更能體現執行的順序

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)

回調

把函數 A 做爲參數傳入函數 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('異步結束');

//打印結果：
//異步開始
//異步結束
//foo
//bar