JavaScript ทำงานร่วมกันที่ไม่รอ

"I will finish later!"

ฟังก์ชันที่ทำงานพร้อมกับฟังก์ชันอื่นนอกเหนือจากนี้เรียกว่า ฟังก์ชันที่ทำงานแบบอะสอนนิส (asynchronous)

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

JavaScript ที่ทำงานแบบอะสอนนิส

ตัวอย่างที่ใช้ในบทก่อนนี้ถูกเรียกเพื่อเรียบเรียง

มุ่งหมายของมันคือเพื่อแสดงกระบวนวางฟังก์ชันคอลบแบค:

ตัวอย่าง

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

ทดลองด้วยตัวเอง

ในตัวอย่างที่กล่าวข้างต้นmyDisplayer คือชื่อฟังก์ชัน

มันถูกส่งเป็นพาเมอร์ให้กับ myCalculator()。

ในโลกที่เป็นจริง คอลบแบคใช้มากที่สุดกับฟังก์ชันที่ทำงานแบบอะสอนนิส

ตัวอย่างที่เป็นทั่วไปของ JavaScript setTimeout()。

รอความหลังเวลา

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

ตัวอย่าง

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

ทดลองด้วยตัวเอง

ในตัวอย่างด้านบนเราทำmyFunction ใช้เป็นคอลบแบค

ฟังก์ชัน (ชื่อฟังก์ชัน) ส่งผ่านเป็นตัวอุปกรณ์ให้กับ setTimeout()。

3000 คือจำนวนมิลลิเซกันด์ที่เหลือจนกว่าจะหยุดเวลา ดังนั้น หลังจาก 3 วินาทีจะเรียกใช้ myFunction()。

เมื่อคุณส่งฟังก์ชันเป็นพาเมอร์ คุณต้องจดจำไม่ใช้ตัวเปิดและปิดเครื่องหมายวงบรรจุภัณฑ์

ถูกต้อง: 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 คือจำนวนมิลลิเซกันด์ที่เหลือจนกว่าจะหยุดเวลา ดังนั้น หลังจาก 3 วินาทีจะเรียกใช้ myFunction()。

รอช่วงเวลา:

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

ตัวอย่าง

setInterval(myFunction, 1000);
function myFunction() {
  let d = new Date();
  document.getElementById("demo").innerHTML=
  d.getHours() + ":" +
  d.getMinutes() + ":" +
  d.getSeconds();
}

ทดลองด้วยตัวเอง

ในตัวอย่างที่กล่าวข้างต้นmyFunction ใช้เป็นคอลบแบค

ฟังก์ชัน (ชื่อฟังก์ชัน) ส่งผ่านเป็นตัวอุปกรณ์ให้กับ setInterval()。

1000 คือจำนวนมิลลิเซกันด์ที่เป็นช่วงเวลาในระหว่างการเรียกใช้ ดังนั้น 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);
    } แล้ว {
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

ทดลองด้วยตัวเอง

ในตัวอย่างด้านบนเราทำmyDisplayer ใช้เป็นคอลบแบค

ฟังก์ชัน (ชื่อฟังก์ชัน) ส่งผ่านเป็นตัวอุปกรณ์ให้กับ getFile()。

ข้างต้นนี้คือ mycar.html สำเนา:

mycar.html

<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>รถเป็นยานยนต์ที่มีล้อหลายต่อ ที่ใช้กำลังด้วยตัวเองเพื่อการขนส่ง</p>
<p>คำอธิบายของคำว่านี้เฉพาะโดยทั่วไปนั้น มีการกำหนดว่ารถถูกออกแบบให้วิ่งหลักบนถนน มีที่นั่งสำหรับคน 1 ถึง 8 คน โดยทั่วไปจะมีล้อ 4 ล้อ</p>
<p>(Wikipedia)</p>