[JavaScript] Callback Notes (with jQuery)

參考：Tutorials:How jQuery Works

Callback Function
callback function 當作參數傳給 parent function 時，像這樣：

$.get('myhtmlpage.html', myCallBack);

但是如果這個 callback function 本身也需要傳參數，則不能寫成

$.get('myhtmlpage.html', myCallBack(param1, param2));  // wrong!!

因為這樣是表示先呼叫 myCallBack，執行後的回傳結果當做 get 的第二個參數。正確的寫法應該是：

$.get('myhtmlpage.html', function(){
  myCallBack(param1, param2);
});

Callback function 用到上層迴圈變數時
當需要寫到這種類型的 code 時：

for(var i=0; i<imgs.length; ++i){
   $(imgs[i]).click = function(){
                           imgs[i].src = xxxx;
                        }
}

會發現 function 中的 imgs[i].src 發生 out of index 的錯誤，因為 i 在 onclick 這個 callback 執行時已經等於 imgs.length 了。有兩種做法可以參考：

方法一：把 onclick 指向一個立刻執行的無名 function 回傳回來的 function。

$(imgs[i]).click = (function(i){
                         return function(){  imgs[i].src = xxx;   }
                      })(i);

(function(i){...})(i) 是一個立刻執行的無名變數，接收傳入的參數 i，回傳一個 function 裡面做我們想做的事情。

方法二：用 recursive 的方式取代原本的 for loop。

function loop(i){
   $(imgs[i]).click = function(){
                           imgs[i].src = xxx;
                        }
   if (i<imgs.length)
       loop(i+1);
}
loop(0);

不管方法一還是二，道理都是 function 的 int 參數是 pass by value 的關係，讓 i 在被 assign 到 callback 之前的執行過程中分身了。