JavaScript Bất đồng bộ là gì?
Các hàm chạy song song với các hàm khác được gọi là bất đồng bộ. Một ví dụ điển hình là hàm setTimeout() trong JavaScript.
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 truyền cho myCalculator() như một đối số.
Trong thực tế, callback thường được sử dụng nhiều nhất với các hàm bất đồng bộ. Một ví dụ điển hình là setTimeout() trong JavaScript.
Chờ hết thời gian chờ:
Khi sử dụng hàm setTimeout() của JavaScript, bạn có thể chỉ định một hàm callback được thực thi khi hết thời gian chờ:
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 callback. myFunction được truyền cho setTimeout() như một đố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.
Lưu ý:
- Khi truyền một hàm như một đối số, hãy nhớ không sử dụng dấu ngoặc đơn.
- Đúng:
setTimeout(myFunction, 3000); - Sai:
setTimeout(myFunction(), 3000);
Thay vì truyền tên của một hàm như một đối số cho một hàm khác, bạn luôn có thể truyền toàn bộ hàm thay vào đó:
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 callback. Đó là một hàm hoàn chỉnh. Toàn bộ hàm được truyền cho setTimeout() như một đố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ờ các khoảng thời gian:
Khi sử dụng hàm setInterval() của JavaScript, bạn có thể chỉ định một hàm callback được thực thi cho mỗi khoảng thời gian:
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 callback. myFunction được truyền cho 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 mỗi giây.
Các lựa chọn thay thế cho callback:
Với lập trình bất đồng bộ, các chương trình JavaScript có thể bắt đầu các tác vụ chạy lâu và tiếp tục chạy các tác vụ khác song song.
Tuy nhiên, các chương trình bất đồng bộ rất khó viết và khó gỡ lỗi.
Do đó, hầu hết các phương thức JavaScript bất đồng bộ hiện đại không sử dụng callback. Thay vào đó, JavaScript sử dụng Promise để giải quyết vấn đề lập trình bất đồng bộ.
Lưu ý:
Bạn sẽ tìm hiểu về Promise trong các bài tiếp theo của hướng dẫn này.
