JavaScript không đồng bộ
"Ta sẽ hoàn thành sau!"
Các hàm chạy song song với các hàm khác được gọi là không đồng bộ
Một ví dụ điển hình là JavaScript setTimeout ()
JavaScript không đồng bộ
Các ví dụ được sử dụng trong chương trước rất đơn giản hóa.
Mục đích của các ví dụ là để chứng minh cú pháp của các hàm gọi lại:
Thí dụ
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
Trong ví dụ trên, myDisplayerlà tên của một hàm.
Nó được chuyển đến myCalculator()như một đối số.
Trong thế giới thực, các lệnh gọi lại thường được sử dụng nhất với các hàm không đồng bộ.
Một ví dụ điển hình là JavaScript setTimeout().
Đang chờ hết thời gian chờ
Khi sử dụng hàm JavaScript setTimeout(), bạn có thể chỉ định một hàm gọi lại sẽ được thực thi khi hết thời gian:
Thí dụ
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
Trong ví dụ trên, myFunctionđược sử dụng như một cuộc gọi lại.
myFunctionđược chuyển đến setTimeout()như một đối số.
3000 là số mili giây trước khi hết thời gian, vì vậy
myFunction()sẽ được gọi sau 3 giây.
Khi bạn truyền một hàm làm đối số, hãy nhớ không sử dụng dấu ngoặc đơn.
Phải: setTimeout (myFunction, 3000);
Sai: setTimeout (myFunction (), 3000);
Thay vì chuyển tên của một hàm làm đối số cho một hàm khác, bạn luôn có thể chuyển toàn bộ một hàm để thay thế:
Thí dụ
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Trong ví dụ trên, function(){ myFunction("I love You !!!"); }
được sử dụng như một cuộc gọi lại. Nó là một chức năng hoàn chỉnh. Hàm hoàn chỉnh được chuyển tới setTimeout () như một đối số.
3000 là số mili giây trước khi hết thời gian, vì vậy
myFunction()sẽ được gọi sau 3 giây.
Chờ khoảng thời gian:
Khi sử dụng hàm JavaScript setInterval(), bạn có thể chỉ định một hàm gọi lại sẽ được thực thi cho mỗi khoảng thời gian:
Thí dụ
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
Trong ví dụ trên, myFunctionđược sử dụng như một cuộc gọi lại.
myFunctionđược chuyển đến setInterval()như một đối số.
1000 là số mili giây giữa các khoảng thời gian, vì vậy
myFunction()sẽ được gọi là mỗi giây.
Đang đợi tệp
Nếu bạn tạo một hàm để tải tài nguyên bên ngoài (như tập lệnh hoặc tệp), bạn không thể sử dụng nội dung trước khi nó được tải đầy đủ.
Đây là thời điểm hoàn hảo để sử dụng một cuộc gọi lại.
Ví dụ này tải một tệp HTML ( mycar.html) và hiển thị tệp HTML trong một trang web, sau khi tệp được tải đầy đủ:
Đang đợi tệp:
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);
Trong ví dụ trên, myDisplayerđược sử dụng như một cuộc gọi lại.
myDisplayerđược chuyển đến getFile()như một đối số.
Dưới đây là bản sao của 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>