2013年9月27日 星期五

【Javascript】basic callback

最近上班學習使用node.js這個framework開發Web Application
node.js使用 V8 Javascript Engine
Javascript是一個很自由的語言
可以是 Object Oriented 形式或是 functional 形式
若以事件驅動的概念來寫 Javascript
我覺得callback是最基本的觀念與核心

假設寫了兩個事件,一個是煮水餃事件,另一個是吃水餃事件。
在現實當中,水餃煮熟了才能開始吃,而煮水餃這件事情需要一些時間。
因此在程式邏輯上
會希望吃水餃這個事件等煮水餃事件完成以後才發生
先看一下不使用 callback 的情形
function do_a(){
 console.log("'do_a':開始煮水餃");
 setTimeout( function(){
  console.log("'do_a':水餃煮熟了");
 }, 1000 );
}

function do_b(){
 console.log("'do_b':吃水餃");
}

do_a();
do_b();


會發現雖然do_a()在do_b()前面執行
但因為do_a()執行需要一段時間
所以就會發生水餃還沒煮熟就開始吃了 XD

再來看看使用 callback 的解決辦法
function do_a( callback ){
 console.log("'do_a':開始煮水餃");
 setTimeout( function(){
  console.log("'do_a':水餃煮熟了");
  callback && callback();
 }, 1000 );
}

function do_b(){
 console.log("'do_b':吃水餃");
}

do_a( function(){
 do_b();
} );
使用 callback 寫法的話
就可以確保do_b()在do_a()完成後才被執行
這是使用 callback 最基本的寫法
但 callback 實際上在使用都會帶參數
了解 callback 後,才有辦法學習 node.js 的 events