JavaScript không đồng bộ
"Tôi sẽ hoàn thành sau!"
Các hàm chạy song song với các hàm khác gọi là bất đồ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.
Mục đích của các ví dụ là để minh họa cú pháp của hàm gọi lại:
Ví 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, myDisplayer
là tên của một hàm.
Nó được chuyển đến myCalculator()
làm đối số.
Trong thế giới thực, lệnh gọi lại thường được sử dụng nhiều 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ờ thời gian chờ
Khi sử dụng hàm JavaScript setTimeout()
, bạn có thể chỉ định hàm gọi lại sẽ được thực thi khi hết thời gian chờ:
Ví dụ
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
Trong ví dụ trên, myFunction
được sử dụng làm hàm gọi lại.
myFunction
được chuyển tới setTimeout()
làm đối số.
3000 là số mili giây trước khi hết thời gian chờ, vì vậy myFunction()
sẽ được gọi sau 3 giây.
Ghi chú
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 hàm làm đối số cho hàm khác, bạn luôn có thể chuyển toàn bộ hàm:
Ví 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 làm lệnh 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() làm đối số.
3000 là số mili giây trước khi hết thời gian chờ, vì vậy myFunction()
sẽ được gọi sau 3 giây.
Chờ đợi khoảng thời gian:
Khi sử dụng hàm JavaScript setInterval()
, bạn có thể chỉ định hàm gọi lại sẽ được thực thi cho mỗi khoảng thời gian:
Ví 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 làm hàm gọi lại.
myFunction
được chuyển tới setInterval()
làm đố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 mỗi giây.
Các lựa chọn thay thế gọi lại
Với lập trình không đồng bộ, các chương trình JavaScript có thể bắt đầu các tác vụ dài hạn và tiếp tục chạy song song các tác vụ khác.
Tuy nhiên, các chương trình không đồng bộ rất khó viết và khó gỡ lỗi.
Do đó, hầu hết các phương thức JavaScript không đồng bộ hiện đại đều không sử dụng lệnh gọi lại. Thay vào đó, trong JavaScript, việc lập trình không đồng bộ được giải quyết bằng cách sử dụng Promise .
Ghi chú
Bạn sẽ tìm hiểu về lời hứa trong chương tiếp theo của hướng dẫn này.