"ฉันจะโทรกลับทีหลัง!"
การโทรกลับเป็นฟังก์ชันที่ส่งผ่านเป็นอาร์กิวเมนต์ไปยังฟังก์ชันอื่น
เทคนิคนี้อนุญาตให้ฟังก์ชันเรียกใช้ฟังก์ชันอื่นได้
ฟังก์ชันการโทรกลับสามารถทำงานได้หลังจากฟังก์ชันอื่นเสร็จสิ้นแล้ว
ฟังก์ชัน JavaScript จะถูกดำเนินการตามลำดับที่เรียกว่า ไม่อยู่ในลำดับที่กำหนดไว้
ตัวอย่างนี้จะแสดงคำว่า "ลาก่อน":
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
</script>
</body>
</html>
ตัวอย่างนี้จะแสดงคำว่า "Hello":
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
</script>
</body>
</html>
บางครั้งคุณอาจต้องการควบคุมได้ดีขึ้นว่าจะเรียกใช้ฟังก์ชันเมื่อใด
สมมติว่าคุณต้องการคำนวณ แล้วแสดงผลลัพธ์
คุณสามารถเรียกใช้ฟังก์ชันเครื่องคิดเลข (myCalculator) บันทึกผลลัพธ์ จากนั้นเรียกใช้ฟังก์ชันอื่น (myDisplayer) เพื่อแสดงผลลัพธ์:
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);
</script>
</body>
</html>
หรือคุณสามารถเรียกใช้ฟังก์ชันเครื่องคิดเลข (myCalculator) และปล่อยให้ฟังก์ชันเครื่องคิดเลขเรียกใช้ฟังก์ชันการแสดงผล (myDisplayer):
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
</script>
</body>
</html>
ปัญหาในตัวอย่างแรกข้างต้นคือคุณต้องเรียกใช้ฟังก์ชันสองฟังก์ชันเพื่อแสดงผลลัพธ์
ปัญหาของตัวอย่างที่สองคือคุณไม่สามารถป้องกันฟังก์ชันเครื่องคิดเลขได้ กำลังแสดงผล
ตอนนี้ถึงเวลาที่จะโทรกลับ
การโทรกลับเป็นฟังก์ชันที่ส่งผ่านเป็นอาร์กิวเมนต์ไปยังฟังก์ชันอื่น
เมื่อใช้การโทรกลับ คุณสามารถเรียกใช้ฟังก์ชันเครื่องคิดเลข (myCalculator) ด้วยการโทรกลับ (myCallback) และปล่อยให้ฟังก์ชันเครื่องคิดเลขเรียกใช้การโทรกลับหลังจากการคำนวณเสร็จสิ้น:
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(something) {
document.getElementById("demo").innerHTML = something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
</script>
</body>
</html>
ในตัวอย่างข้างต้น myDisplayer เรียกว่า ฟังก์ชันเรียกกลับ
มันถูกส่งไปที่ myCalculator() เป็น อาร์กิวเมนต์
เมื่อคุณส่งฟังก์ชันเป็นอาร์กิวเมนต์ อย่าลืมใช้วงเล็บ
ขวา: myCalculator(5, 5, myDisplayer);
ผิด: myCalculator(5, 5, myDisplayer());
// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Call removeNeg with a callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Display Result
document.getElementById("demo").innerHTML = posNumbers;
// Keep only positive numbers
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body style="text-align: right">
<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>
<p id="demo"></p>
<script>
// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Call removeNeg with a Callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Display Result
document.getElementById("demo").innerHTML = posNumbers;
// Remove negative numbers
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}
</script>
</body>
</html>
ในตัวอย่างข้างต้น (x) => x >= 0 เป็น ฟังก์ชันเรียกกลับ
มันถูกส่งไปที่ removeNeg() เป็น อาร์กิวเมนต์
ตัวอย่างข้างต้นไม่น่าตื่นเต้นมากนัก
พวกมันถูกทำให้ง่ายขึ้นเพื่อสอนคุณเกี่ยวกับไวยากรณ์การโทรกลับ
ในกรณีที่การโทรกลับมีความโดดเด่นในฟังก์ชันอะซิงโครนัส โดยที่ฟังก์ชันหนึ่งต้องรออีกฟังก์ชันหนึ่ง (เช่น รอให้โหลดไฟล์)
ฟังก์ชันอะซิงโครนัสจะกล่าวถึงในบทถัดไป