# 筆記_Javascript callback 簡易實作
---
###### tags: `javascript`

[JavaScript 什麼是Callback函式 (Callback Function)？](https://matthung0807.blogspot.com/2019/05/javascript-callback-callback-function.html)

實在太不懂CallBack是啥鬼了
所以多看一些文章來搞懂

>Callback函式，亦稱回呼函式，簡單來說就是「在一支函式執行完後，才要執行的函式」。
A function that is to be executed after another function has finished executing.

- 同步(Synchronous)是指程式必須等待前面的程式執行完才能執行。
- 非同步(Asynchronous)是指程式不須等待前面的程式執行完就能執行。

這個兩個function說是一樣的

// 一般執行
var doFirst = function () {
    console.log('do first...');
}

var doLater = function () {
    console.log('do later...')
}

doFirst();
doLater();

// 使用callback
var doFirst = function (callback) {
    console.log('do first...');
    callback(); // <---執行傳入的doLater()
}

/** callback function **/
var doLater = function () {
    console.log('do later...')
}
doFirst(doLater);

都會得到

do first...
do later...

加入setTimeout()

原本doFirst()中直接印出"do first..."文字的工作改交由setTimeout()這個非同步(Asynchronous)程式處理。

>setTimeout()的第一個參數為時間到時要被執行的程式，第二個參數為要延遲的時間（毫秒）。

var doFirst = function () {
    setTimeout(function() {
        console.log('do first...')
    }, 3000); // 非同步，3秒後才執行
}

var doLater = function () {
    console.log('do later...')
}

doFirst();
doLater();

印出結果，doLater()中的文字先被印出，隔3秒後才印出doFirst()中的文字。

do later...
// 間隔3秒
do first...

由於上面的setTimeout()是非同步，所以下面的doLater()不須等待doFirst()執行完就會先被執行了。

所以為了確保doLater()要在doFirst()中的setTimeout(...)中的do first...印出後才執行，所以我們需要將doLater()做為callback函式以參數傳入doFirst()如下：

**正解:**

var doFirst = function (callback) {
    setTimeout(function() {
        console.log('do first...');
        callback(); // <-- 在"do first..."印出後才執行
    }, 3000); // 非同步，3秒後才執行
}

var doLater = function () {
    console.log('do later...')
}

doFirst(doLater);

我的(錯誤):

setTimeout非同步
1. 執行doFirst()
2. 執行callback() callback在setTimeout的參數外
所以一樣異部執行
這時console.log('do first...')還在等3秒
3. console.log('do later...')
4. 3秒到回傳console.log('do first...')

var doFirst = function (callback) {
    setTimeout(function() {
        console.log('do first...');     
    }, 3000); // 非同步，3秒後才執行
    callback();
}

var doLater = function () {
    console.log('do later...')
}

doFirst(doLater);

do later...
// 間隔3秒
do first...