JS Callback function - function 的執行順序

 目的 :  認識 callback function 的定義及用法

處理說明:  JavaScript 是一個「非同步」的語言，

當我們執行程式時， for 迴圈並不會等待處理作業(statement)結束後才繼續，

而是在執行階段就一口氣將statement執行完。

一. callback function 的定義:  call function , 只有滿足某個條件(event 發生時)才會被執行

    Callback function 跟一般的函式沒什麼不同， 差別在於被呼叫執行的時機

     Office.addEventListener( '電話響', function(){ /* 接電話 */ }, false);

Callback function就是「把函式當作另一個函式的參數，透過另一個函式來呼叫它」

Ex1>   window.setTimeout( function(){ ... }, 1000);

Ex2>

  var handler = function() { /* 接電話 */ }; 

  Office.addEventListener( '電話響', handler, false);

Ex3:

var funcA = function(){

  console.log('function A');

};

var funcB = function(){

  console.log('function B');

};

funcA();
funcB();

         -->  先印  function A  , 再印 function B

Ex4:

         var funcA=function {
                   window.setTimeout(function(){  console.log('function A'); }, 

                    Math.random()*1000);
         }

         var funcB=function {
                   window.setTimeout(function(){console.log('function B'); }, 
                    Math.random()*1000);
         }

         funcA();

         funcB();

        --> 不確定 function A / function B 先印

Ex5: 確保 function A 先印, 再印 function B

         var funcA=function(par_callback) {
                   window.setTimeout(function(){

                    console.log('function A'); 

                    if (typeof par_callback="function"){

                        par_callback();  

                    }

                    }, 

                    Math.random()*1000);

         };

         var funcB=function(){

               window.setTimeout(function(){

                    console.log('function B'); 

                    }, 

                    Math.random()*1000);

         };

       funcA(funcB);

  

       --> 無論 funcA 在執行的時候要等多久， 

     funcB 都會等到 console.log('function A'); 之後才執行。

Ex6 : 在五秒鐘之內，每秒鐘依序透過 console.log 印出： 0 1 2 3 4

          for (var i=0;i<5;i++){

               window.setTimeout(function(){   console.log(i);  }

                    ,1000*i);

           };

           //執行結果 : 5 5 5 5 5  

--> JavaScript 是一個「非同步」的語言,執行程式時， 

   for迴圈並不會等待處理作業(statement , window.setTimeout )結束後才繼續，

      而是在執行階段就一口氣將statement執行完。              

--> 切分變數(i)有效範圍的最小單位是 "function"

--> 因為函式未宣告變數 i , 所以每次執行 console.log(i); 的 i 變數是去函式「外層」取得
      因 function() 內未宣告 var i, 所以會在函式外層取得 (此時for迴圈已跑完 i=5) , 所以印出 5

      for(var i =0; i<5;i++)   --> 宣告 i 為全域變數

二.IIFE(Immediately Invoked Function Expression, IIFE)

    一般宣告方式:  doit(x);

    IIFE宣告方式:  函式宣告當下即呼叫 , 傳入參數 i , 即傳入當時的 i 值(0,1,2,3,4,5)

           (function doit(x){ console.log(x);} ) (i)

--> for (var i=0;i<5;i++) 

          (function doit(x){ console.log(x);} ) (i);