iT邦幫忙

2021 iThome 鐵人賽
DAY 28
0
自我挑戰組

JavaScript老學徒筆記—馬步篇系列 第 30 篇

回頭呼喊你的愛情：Callback回呼函式

13th鐵人賽 javascript callback
1327 瀏覽

  • 分享至 

  • xImage
    •  

甚麼是「Callback function」?

MDN的解釋如下：

「回呼函式（callback function）是指能藉由參數（argument）通往另一個函式的函式。它會在外部函式內調用、以完成某些事情。」

我改寫一下MDN上的範例：

function aFunc(name) {
  alert('Hello ' + name);
}

function bFunc(callback) {
  var name = prompt('報名華山論劍大會，請輸入你的名字：');
  callback(name);
}

bFunc(aFunc);

最後呼叫函式 bFunc (aFunc)，aFunc是bFunc的callback參數，bFunc的變數name又藉由callback傳入bFunc之中。所以我們可以理解「把A函式當成B函式的參數，透過B函式來呼叫它」，A函式就是一個Callback function。

解釋有點抽象嗎？讓我們換個場景，想想之前提過的「事件監聽」。

例如：看到紅燈，然後踩剎車！踩剎車這個動作，在「看到紅燈」這個條件滿足的時候才執行。所以我們會監聽「看到紅燈」這個事件，一旦事件觸發，就去呼叫「剎車」這個動作(函式)。這也是把「剎車」這個函式當成事件監聽的參數。

還有一個常常會用到的window.setTimeout()也是callback function的經典案例：

window.setTimeout(function(){//do something},1000);

所以我們可以歸納出：

  • 「把A函式當成B函式的參數，透過B函式來呼叫它」，A函式就是一個Callback function。
  • 滿足某個條件才去執行的函式，就可以稱為Callback function。

那在甚麼時候適合使用callback function呢？我想是在「控制函式執行的時機」的情境下適合使用：

  • 滿足條件，才去執行的函式。
  • 控制函式執行的先後順序。

假設郭靖跟歐陽克都中了毒：

let poisonA = function(){
	alert('歐陽克中毒身亡！');
};

let poisonB = function(){
 alert('郭靖中毒身亡！');
}

poisonA();
poisonB();

這樣的執行順序當然是先跳('歐陽克中毒身亡！')的視窗，再跳('郭靖中毒身亡！')。但是如果加上一個隨機生成的等待時間，那視窗的彈跳順序就不一定了。

let poisonA = function(){
	var i = Math.random()+1;
	window.setTimeout(function () {
		alert('歐陽克中毒身亡！');
	}, i * 1000)
};

let poisonB = function(){
	var i = Math.random()+1;
	window.setTimeout( () {
	alert('郭靖中毒身亡！');
	}, i * 1000 )
}

poisonA();
poisonB();

有時是('郭靖中毒身亡！')會先跳出來，有時是('歐陽克中毒身亡！')會先跳出來！

如果我們想確保('歐陽克中毒身亡！')比('郭靖中毒身亡！')早跳出來，可以這樣寫：

const poisonA = function(callback){
	const i = Math.random() + 1;
	window.setTimeout(function () {
		alert('歐陽克中毒身亡！');
    if (typeof callback === 'function'){
      callback();
    };
	}, i * 1000)  
};

const poisonB = function(){
	const i = Math.random() + 1;
	window.setTimeout (function() {
	alert('郭靖中毒身亡！');
	}, i* 1000 );
}

poisonA( poisonB );

這樣歐陽克就會比郭靖還要早毒發身亡了！

但是如果中毒的人越來越多，一個函式呼叫另一個函式，一層一層包下去，就變成「回呼地獄」了。

再假設另外一個情境：

「王重陽參加華山論劍，只要打敗黃藥師、洪七公、段皇爺與歐陽鋒，就會奪得『武功第一』的封號。但是不用去管王重陽與人決鬥的先後順序，只要與每個人都打過就可以。」

這時候我們可以這樣做：

let fightProcess = []; //設一個空陣列，王重陽每次比武，都push到陣列中
let step = 4;  //王重陽與4個人比武

function fightA () {
  window.setTimeout(function(){
    fightProcess.push('王重陽打敗黃藥師');
    console.log('王重陽打敗黃藥師');
    if (fightProcess.length === step){   
		//比較空陣列fightProcess的長度是否與step相等，如果相等，就執行ightWinner()
      fightWinner();
    }
  },(Math.random()+1) * 1000);
};

function fightB () {
  window.setTimeout(function(){
    fightProcess.push('王重陽打敗洪七公');
    console.log('王重陽打敗洪七公');
    if (fightProcess.length === step){
      fightWinner();
    }
  },(Math.random()+1) * 1000);
}

function fightC () {
  window.setTimeout(function(){
    fightProcess.push('王重陽打敗段皇爺');
    console.log('王重陽打敗段皇爺');
    if (fightProcess.length === step){
      fightWinner();
    }
  },(Math.random()+1) * 1000);
}

function fightD () {
  window.setTimeout(function(){
    fightProcess.push('王重陽打敗歐陽鋒');
    console.log('王重陽打敗歐陽鋒');
    if (fightProcess.length === step){
      fightWinner();
    }
  },(Math.random()+1) * 1000);
}

function fightWinner(){
  console.log('王重陽天下武功第一，人稱「中神通」');
  console.log(fightProcess);
}

fightA();
fightB();
fightC();
fightD();

Promise物件

Promise物件是ES6之後新增的物件，照字面的解釋就是「承諾」，回傳的結果只有兩種：「解決」與「拒絕」。

Promise物件長成這個樣子：

let myPromise = new Promise((resolve, reject) =>{
	resolve('解決');
	reject('拒絕');
})

要在一個函式中使用Promise功能，只要讓它回傳一個Promise物件就行了：

function urPromise(){
	return new Promise((resolve,reject) => {
		//resolve()或reject()
	});
}

Promise還提供了三種方法：

  • .then()：依順序串聯執行多個promise功能。
  • Promise.all()：直到全部函式都回覆resolve，或其中一個reject，才繼續後面功能
  • Promise.race()：只要其中一個函式resolve，不等待其他含式執行，直接行後續動作，

像剛剛那個「王重陽與四大高手比武」的過程就可以這樣寫：

function fightA () {
  return new Promise(function(resolve,reject){
    window.setTimeout(function() {
      console.log('王重陽打敗黃藥師');
      resolve('王重陽打敗黃藥師');
    },(Math.random()+1) * 1000);
  });
}

function fightB () {
  return new Promise((resolve,reject) =>{
    window.setTimeout(() =>{
      console.log('王重陽打敗洪七公');
      resolve('王重陽打敗洪七公');
    },(Math.random()+1) * 1000);
  });
}

function fightC () {
  return new Promise((resolve,reject) =>{
    window.setTimeout(() =>{
      console.log('王重陽打敗段皇爺');
      resolve('王重陽打敗段皇爺');
    },(Math.random()+1) * 1000);
  });
}

function fightD () {
  return new Promise((resolve,reject) =>{
    window.setTimeout(() =>{
      console.log('王重陽打敗歐陽鋒');
      resolve('王重陽打敗歐陽鋒');
    },(Math.random()+1) * 1000);
  });
}

function fightWinner(){
	console.log('王重陽天下武功第一，人稱「中神通」');  
}

//加上.then可以做到依次執行
fightA()
  .then(fightB)
  .then(fightC)
  .then(fightD)
	.then(fightWinner);

我們在呼叫fightA()之後，用.then串接後面要執行的函式，這樣我們就可以做到依順序執行了。

來看看promise.all的情況：

function fightA () {
  return new Promise(function(resolve,reject){
    window.setTimeout(function() {
      console.log('王重陽打敗黃藥師');
      resolve('王重陽打敗黃藥師');
    },(Math.random()+1) * 1000);
  });
}

function fightB () {
  return new Promise((resolve,reject) =>{
    window.setTimeout(() =>{
      console.log('王重陽打敗洪七公');
      resolve('王重陽打敗洪七公');
    },(Math.random()+1) * 1000);
  });
}

function fightC () {
  return new Promise((resolve,reject) =>{
    window.setTimeout(() =>{
      console.log('王重陽打敗段皇爺');
      resolve('王重陽打敗段皇爺');
    },(Math.random()+1) * 1000);
  });
}

function fightD () {
  return new Promise((resolve,reject) =>{
    window.setTimeout(() =>{
      console.log('王重陽打敗歐陽鋒');
      resolve('王重陽打敗歐陽鋒');
    },(Math.random()+1) * 1000);
  });
}

function fightWinner(){
	console.log('王重陽天下武功第一，人稱「中神通」');  
}
//不管fightA(),fightB(),fightC(),fightD()的執行順序，只要都執行了就繼續後面的程式
Promise.all([fightA(),fightB(),fightC(),fightD()])
  .then(fightWinner);

Promise.all()則會等待全部的Promise函式都執行了，才會進行後面的.then函式。

然後是promise.race：

function fightA () {
  return new Promise(function(resolve,reject){
    window.setTimeout(function() {
      console.log('王重陽打敗黃藥師');
      resolve('王重陽打敗黃藥師');
    },(Math.random()+1) * 1000);
  });
}

function fightB () {
  return new Promise((resolve,reject) =>{
    window.setTimeout(() =>{
      console.log('王重陽打敗洪七公');
      resolve('王重陽打敗洪七公');
    },(Math.random()+1) * 1000);
  });
}

function fightC () {
  return new Promise((resolve,reject) =>{
    window.setTimeout(() =>{
      console.log('王重陽打敗段皇爺');
      resolve('王重陽打敗段皇爺');
    },(Math.random()+1) * 1000);
  });
}

function fightD () {
  return new Promise((resolve,reject) =>{
    window.setTimeout(() =>{
      console.log('王重陽打敗歐陽鋒');
      resolve('王重陽打敗歐陽鋒');
    },(Math.random()+1) * 1000);
  });
}

function fightWinner(){
	console.log('王重陽天下武功第一，人稱「中神通」');  
}
//只要fightA(),fightB(),fightC(),fightD()其中之一執行，就繼續執行後面的程式
//但是fightA(),fightB(),fightC(),fightD()都會執行，不會取消
Promise.race([fightA(),fightB(),fightC(),fightD()])
  .then(fightWinner);

Promise.race就如同「競賽」一樣，只要有其中一個Promise函式先做到，不待其它的Promise函式完成，就直接進行.then後面的程式。但是其他的Promise函式還是會繼續執行，不會取消。


上一篇
事件監聽的this:「這個」到底是哪一個?
下一篇
IIFE立即執行函式
系列文
JavaScript老學徒筆記—馬步篇 共 35 篇
  1. 31
    IIFE立即執行函式
  2. 32
    暗通款曲的閉包
  3. 33
    「this」好七怪！
  4. 34
    好記性的瀏覽器：localStorage
  5. 35
    最終章：Todo List實作
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Hooo
iT邦新手 4 級 ‧ 2021-09-28 18:28:57

華山論劍的舉例很有趣 👍

登入發表回應

我要留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙