追求JS小姊姊系列 Day13 -- 方函式的能力展现：懂回呼函式才能当好工具人

前情提要

方函式似乎正要解释所谓的回呼函式

方函式：郑列的能力啊，是很不错，但是啊... 有些事情重视的就不是什麽多会整理、寻找，而是优先顺序。
我：这又是什麽工具人感慨吗？
方函式：你看麻，工具归工具，但他也有自己的事情要处理，总会有比较忙的时候，随便举个例子

工具人要懂的优先顺序跟时间管理

在没有时间的因素下

假设今天你要处理：JS的杂事doSomethingJSwant()跟你自己的事情doYourOWnThing()

//她要求你帮忙的事
function doSomethingJSwant(){
    buyFruits();
    buyTools();
    walkHerDog();
}
//你自己的事
function doYourOWnThing(){
    work();
    
}

一看就知道，要帮她处理的事情会花较久时间，但如果你把自己的事情摆前面，这样她不生气才怪，而且也没看过这样的工具人吧（信仰不足），所以就只能妥协（？）：

理想工具人的处理顺序表示图：

buySomethingJSwant();
doYourOWnThing();

还不懂回呼函式又虔诚的你，自然只能接受上面的情境
但难道要这样一直跟效率妥协吗？你需要知道同步与非同步的概念（之後再说）

在不定时间的因素下

但不是每件事情所花费的时间，都是能控制的：

今天，JS请你帮她做：洗狗washDog()、她来电时去接她pickHerUp()、帮忙采买杂货buyGroceries()，而且她要求你，接到她的时候，就要带着洗好的狗跟买好的杂货。

//创造随机时间的函式
function getRandomTime(x){
    return Math.floor(Math.random()*x)+1;
};
//参考：https://ithelp.ithome.com.tw/articles/10197904

        //____________________________ //

//洗狗
function jsAskYouToDo1(){
setTimeout(function washDog(){return "狗洗好了";} ,1200000);
}

//买杂货
function jsAskYouToDo2(){
setTimeout(function buyGroceries(){return "买杂货中";} ,getRandomTime(2));
}

//接她
function jsAskYouToDo3(){
setTimeout(function pickHerUp(){return "该接她了";} ,getRandomTime(2));
}

然而根据上图，现在你肯定的只有：狗会洗20分钟，剩下都不能保证阿
如果你是聪明的工具人，是不是会先打电话问清楚她到底几点到，甚至直接叫外送杂货呢？

如果不是使用回呼函式，就算你希望能照顺序执行，结果却未必如此。

console.log(jsAskYouToDo1());
console.log(jsAskYouToDo2());
console.log(jsAskYouToDo3());

// 可能的结果：
//1.洗好狗了 > 她到了 > 买杂货完了
//2.买完杂货 > 狗才洗好 > 她到了

// 甚至是最惨的：
//她到了 > 狗洗好了 > 现在才买完杂货

这时候就能确保每件事情有按照你要的顺序被执行

jsAskYouToDo1(jsAskYouToDo2(jsAskYouToDo3()));

上面这张的图，就能预期它执行的顺序是：
washDog > buyGroceries > pickHerUp

（温馨提醒：在现实生活中，就算事情做对了，但处理太久（例如买杂货）让她等，仍然会让你的工具评分下降。）

再会安排时间，事情一多就也会遇到困难 (传说中的callback hell)

身为头等工具人，当然先安排规划行程，她的每一分每一秒都不可浪费的
但是啊，随着她发现你越好用(?)之後，要求可能也会越多，正所谓：工具力越大，责任越大

假设她把半天的杂事行程都交给你代劳，你也很认真的规划，就会像下面这样：

function buyBreakfast(){
    console.log("早餐买好了"); 
    return function doTheLaundry(){
        console.log("衣服洗好了");
        return function walkTheDog(){
            console.log("遛好狗了");
            return function buyLunch(){
                console.log("午餐买好了")
            };
        };
    };
};

真是个好用的工具呢
但重点是这个方法有不少缺点，容我以下简单条列：

1. 阅读上困难
2. 厘清功能的执行顺序

郑列：这时候就是我的另外的型态 - 生成器 登场的时刻了。
我：（第一次听到比较屌的名称）..好。

-- to be continued --

那今天就到这边搂！今天分享喜欢的歌是：
老王乐队｜枯萎的玫瑰 Withered Roses (Official)
https://www.youtube.com/watch?v=s0lFWZIYzi8

每天的休息，是为了後面的追求，明天见。

reference:

1. 忍者2
2. MDN
3. [讨论] 请问这是工具人之神吗？
4. W3school -setTimeOut()