จาวาสคริปต์อะซิงโครนัส

สารบัญ

    แสดงสารบัญ

"ฉันจะทำให้เสร็จทีหลัง!"

ฟังก์ชันที่ทำงาน ขนาน กับฟังก์ชันอื่นๆ เรียกว่า อะซิงโครนัส

ตัวอย่างที่ดีคือ JavaScript setTimeout()

จาวาสคริปต์แบบอะซิงโครนัส

ตัวอย่างที่ใช้ในบทที่แล้วมีความเรียบง่ายมาก

วัตถุประสงค์ของตัวอย่างคือการสาธิตไวยากรณ์ของฟังก์ชันโทรกลับ:

ตัวอย่าง

 function myDisplayer(something) {
  document.getElementById("demo").innerHTML 
  = something;
}
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() เป็นอาร์กิวเมนต์

ในโลกแห่งความเป็นจริง การโทรกลับมักใช้กับฟังก์ชันอะซิงโครนัส

ตัวอย่างทั่วไปคือ JavaScript setTimeout()

กำลังรอการหมดเวลา

เมื่อใช้ฟังก์ชัน JavaScript setTimeout() คุณสามารถระบุฟังก์ชันการโทรกลับที่จะดำเนินการเมื่อหมดเวลา:

ตัวอย่าง

setTimeout(myFunction, 3000);

function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>setTimeout() with a Callback</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
setTimeout(myFunction, 3000);

function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}
</script>

</body>
</html>

ในตัวอย่างข้างต้น 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;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}
</script>

</body>
</html>

ในตัวอย่างข้างต้น 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();
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>

<p>Using setInterval() to display the time every second (1000 milliseconds).</p>

<h1 id="demo"></h1>

<script>
setInterval(myFunction, 1000);

function myFunction() {
  let d = new Date();
  document.getElementById("demo").innerHTML=
  d.getHours() + ":" +
  d.getMinutes() + ":" +
  d.getSeconds();
}
</script>

</body>
</html>

ในตัวอย่างข้างต้น myFunction จะถูกใช้เป็นการติดต่อกลับ

myFunction ถูกส่งผ่านไปยัง setInterval() เป็นอาร์กิวเมนต์

1,000 คือจำนวนมิลลิวินาทีระหว่างช่วงเวลา ดังนั้น myFunction() จะถูกเรียกทุกวินาที

ทางเลือกการโทรกลับ

ด้วยการเขียนโปรแกรมแบบอะซิงโครนัส โปรแกรม JavaScript สามารถเริ่มทำงานที่ใช้เวลานาน และทำงานอื่นๆ ต่อไปในแบบคู่ขนาน

แต่โปรแกรมอะซิงโครนัสนั้นเขียนยากและแก้ไขจุดบกพร่องได้ยาก

ด้วยเหตุนี้ วิธีการ JavaScript แบบอะซิงโครนัสสมัยใหม่ส่วนใหญ่จึงไม่ใช้การเรียกกลับ แต่ใน JavaScript การเขียนโปรแกรมแบบอะซิงโครนัสได้รับการแก้ไขโดยใช้ Promises แทน

บันทึก

คุณจะได้เรียนรู้เกี่ยวกับคำสัญญาในบทถัดไปของบทช่วยสอนนี้