JS-Callback : 等一會再來叫你

< 參考相關文章 >

請給予小肝肝工程師支持喔 'v' ETH/ERC20

JavaScript Callbacks :

“I will call back later!”

A callback is a function passed as an argument to another function

This technique allows a function to call another function

A callback function can run after another function has finished

以上為W3C 裡面所小結的敘述。

< 你還是說中文吧! >

W3C所說的….

A callback is a function passed as an argument to another function.

callback function 藉由當作函式參數帶入另一個功能陳述式.

中文翻譯字詞會用“回呼””、”回叫”、”回調”

我的話都習慣叫 “回扣” ( 疑?

回扣函式, 通常用於在目前的函式呼叫執行最後移交控制權，而不使用函式回傳值的方式。

直接風格的控制權移交是不明確的，它是用回傳值的方式，然後進行到下一行程式碼或呼叫接下來其他函式。

前幾篇提到的同步的話要函式甲 > 函式乙 > 函式丙 > 函式丁, 你要等前面做完很麻煩 !

Callback function 的用途就在於可以讓我們的程式在不論同步或是非同步執行的狀況下都還是可以依照你要的順序執行函式。

< 基本的參數帶入函式 >

我們這裡用直接風格帶入常數來解釋一下~

function fruitProcessor(apples, oranges) {
// 陳述式內的處裡方式  = 算式
 const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
 return juice;
}

//代入參數
const appleJuice = fruitProcessor(5, 0);

console.log(appleJuice);

//代入參數
const appleOrangeJuice = fruitProcessor(2, 4);

console.log(appleOrangeJuice);

< 如何處理函式 >

我們範例的結構:

1. 處理總函式
2. 蘋果汁處理函式
3. 柳橙汁處裡函式

let apples;
let oranges;

function fruitProcessor(callback)
{
    callback(apples,oranges);
}

function fruitAppleJuice (apples,oranges){
    apples= 5;
    oranges =0;
    const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
    console.log(juice);
}

function fruitOrangeJuice (apples,oranges){
    apples= 2;
    oranges =4;
    const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
    console.log(juice);
}

fruitProcessor( fruitAppleJuice );

fruitProcessor( fruitOrangeJuice );

將你想要處裡的不同參數輸入不同的函式, 爾後只要呼叫過來做處理即可。

< Callback簡單函式參數帶入＋呼叫>

let juice;

function fruitProcessor(apples,oranges,callback)
{
    const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
    callback( juice);
}

function fruitAppleJuice (callback)
{    
    console.log(juice);
 }

 fruitProcessor(5,1, fruitProcessor);


／／執行結果
Juice with 5 apples and 1 oranges.

* 可以自己comment : callback( juice ), 試著自己想想看其中差異!

< Callback用多函式呼叫＿控制執行順序 >

let apples;
let oranges;

function fruitProcessor(callback)
{
    callback(apples,oranges);
}

function fruitAppleJuice (Fn){

   apples= 5;
   oranges =0;
   const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
   console.log(juice);
   Fn()
}

function fruitOrangeJuice (apples,oranges){
    
    apples= 2;
    oranges =4;
    const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
    console.log(juice);
}

fruitProcessor(fruitAppleJuice(fruitOrangeJuice));

結論: fruitAppleJuice 去呼叫執行 fruitOrangeJuice

那你會問…. 既然是A函式去呼叫B函式, 這個有甚麼特別的呢??

有時候阿~ 我們會遇到延遲以及函式需要等待一段時間後執行, 主函式要是遇到錯誤不執行…. 那就是掛點在那了….

在本處我就不講解延遲執行這個方法了, 可以回去看一下我寫的 SetTimeout 的文章

< Callback Settimeout執行時間點 >

我們在主函式裡, 加入 SetTimeout 方式做控制執行.

let apples;
let oranges;

function fruitProcessor(callback)
{
    setTimeout(function(){ 
        console.log("這個是最先還是最後?");
         },0)

    callback(apples,oranges);
}

function fruitAppleJuice (Fn){
   apples= 5;
   oranges =0;
   const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
   console.log(juice);
   Fn()
}

function fruitOrangeJuice (apples,oranges){
    apples= 2;
    oranges =4;
    const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
    console.log(juice);
}

fruitProcessor(fruitAppleJuice (fruitOrangeJuice));


／／執行結果

Juice with５apples and ０ oranges.
Juice with２apples and ４ oranges.
這個是最先還是最後?

Settimeout不管延遲時間設定多少，它都會最後一個執行！