JavaScript แบบอะซิงโครนัส
"ฉันจะเสร็จในภายหลัง!"
ฟังก์ชันที่ทำงานควบคู่ไปกับฟังก์ชันอื่นๆ เรียกว่า asynchronous
ตัวอย่างที่ดีคือ JavaScript setTimeout()
JavaScript แบบอะซิงโครนัส
ตัวอย่างที่ใช้ในบทที่แล้วนั้นเรียบง่ายมาก
จุดประสงค์ของตัวอย่างคือเพื่อแสดงไวยากรณ์ของฟังก์ชันการโทรกลับ:
ตัวอย่าง
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
ในตัวอย่างข้างต้นmyDisplayer
เป็นชื่อของฟังก์ชัน
มันถูกส่งผ่านไปmyCalculator()
เป็นอาร์กิวเมนต์
ในโลกแห่งความเป็นจริง การโทรกลับมักใช้กับฟังก์ชันอะซิงโครนัส
ตัวอย่างทั่วไปคือsetTimeout()
JavaScript
รอการหมดเวลา
เมื่อใช้ฟังก์ชัน JavaScript setTimeout()
คุณสามารถระบุฟังก์ชันเรียกกลับที่จะดำเนินการเมื่อหมดเวลา:
ตัวอย่าง
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
ในตัวอย่างข้างต้นmyFunction
ใช้เป็นโทรกลับ
myFunction
ถูกส่งผ่านไปsetTimeout()
เป็นข้อโต้แย้ง
3000 คือจำนวนมิลลิวินาทีก่อนหมดเวลา ดังนั้น
myFunction()
จะถูกเรียกหลังจาก 3 วินาที
เมื่อคุณส่งฟังก์ชันเป็นอาร์กิวเมนต์ อย่าลืมใช้วงเล็บ
ขวา: setTimeout(myFunction, 3000);
ผิด: setTimeout(myFunction(), 3000);
แทนที่จะส่งชื่อของฟังก์ชันเป็นอาร์กิวเมนต์ไปยังฟังก์ชันอื่น คุณสามารถส่งทั้งฟังก์ชันแทน:
ตัวอย่าง
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
ในตัวอย่างข้างต้นfunction(){ myFunction("I love You !!!"); }
ใช้เป็นโทรกลับ เป็นฟังก์ชันที่สมบูรณ์ ฟังก์ชั่นที่สมบูรณ์ถูกส่งไปยัง setTimeout() เป็นอาร์กิวเมนต์
3000 คือจำนวนมิลลิวินาทีก่อนหมดเวลา ดังนั้น
myFunction()
จะถูกเรียกหลังจาก 3 วินาที
รอช่วงเวลา:
เมื่อใช้ฟังก์ชัน JavaScript setInterval()
คุณสามารถระบุฟังก์ชันเรียกกลับที่จะดำเนินการสำหรับแต่ละช่วงเวลาได้:
ตัวอย่าง
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
ในตัวอย่างข้างต้นmyFunction
ใช้เป็นโทรกลับ
myFunction
ถูกส่งผ่านไปsetInterval()
เป็นข้อโต้แย้ง
1,000 คือจำนวนมิลลิวินาทีระหว่างช่วงเวลา ดังนั้น
myFunction()
จะถูกเรียกทุกวินาที
กำลังรอไฟล์
หากคุณสร้างฟังก์ชันเพื่อโหลดทรัพยากรภายนอก (เช่น สคริปต์หรือไฟล์) คุณจะไม่สามารถใช้เนื้อหาก่อนที่จะโหลดจนเต็มได้
นี่เป็นเวลาที่เหมาะที่จะใช้โทรกลับ
ตัวอย่างนี้โหลดไฟล์ HTML ( mycar.html
) และแสดงไฟล์ HTML ในหน้าเว็บ หลังจากที่ไฟล์โหลดเสร็จ:
กำลังรอไฟล์:
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function getFile(myCallback) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
myCallback(this.responseText);
} else {
myCallback("Error: " + req.status);
}
}
req.send();
}
getFile(myDisplayer);
ในตัวอย่างข้างต้นmyDisplayer
ใช้เป็นโทรกลับ
myDisplayer
ถูกส่งผ่านไปgetFile()
เป็นข้อโต้แย้ง
ด้านล่างเป็นสำเนาของmycar.html
:
mycar.html
<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads,
to have seating for one to eight people, to typically have four wheels.</p>
<p>(Wikipedia)</p>