JavaScript không đồng bộ

"I WILL FINISH LATER!"
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.

Ví dụ

function myDisplayer(y) {
    document.getElementById('demo').innerHTML = y;
}

function myCalculator(x1, x2, myCallback) {
    var x;
    x = x1 + x2;
    myCallback(x);
}

myCalculator(5, 5, myDisplayer);

Xem kết quả

Trong ví dụ trên, myDisplayer là tên của một hàm.

Nó được chuyển đến hàm myCalculator() như là một đối số.

Trong thực tế, các lệnh gọi lại thường được sử dụng nhất là với các hàm không đồng bộ.
Một ví dụ điển hình là hàm JavaScript setTimeout().

Sử dụng hàm JavaScript setTimeout()

Khi sử dụng hàm JavaScript setTimeout(), chúng ta có thể chỉ định một hàm được thực thi sau khi hết một khoản thời gian xác định.

Ví dụ

setTimeout(myFunction,3000);

function myFunction() {
    document.getElementById('demo').innerHTML = "<h1>Hello JavaScript!</h1>" ;    
}

Xem kết quả

Trong ví dụ trên, hàm myFunction được sử dụng như một hàm gọi lại.

myFunction được chuyển đến hàm 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.
Đúng: 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, chúng ta luôn có thể chuyển toàn bộ một hàm để thay thế.

Ví dụ

setTimeout(function() {myFunction("<h1>Hello JavaScript!</h1>");},3000);

function myFunction(text) {
    document.getElementById('demo').innerHTML = text ;    
}

Xem kết quả

Trong ví dụ trên, function(){ myFunction("<h1>Hello JavaScript!</h1>");} được sử dụng như một hàm 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 hàm 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.

Sử dụng hàm JavaScript setInterval()

Khi sử dụng hàm JavaScript setInterval(), chúng ta có thể chỉ định một hàm gọi lại sẽ được thực thi sau mỗi khoảng thời gian xác định.

Ví dụ

setInterval(myFunction,1000);

function myFunction() {
    const date = new Date();
    var x;
    x = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
    document.getElementById('demo').innerHTML = x ;    
}

Xem kết quả

Trong ví dụ trên, hàm myFunction được sử dụng như một hàm gọi lại.

myFunction được chuyển đến hàm setInterval() như một đối số.

1000 là số mili giây giữa các khoảng thời gian, vì vậy hàm myFunction() sẽ được gọi là mỗi giây.

Tải một file từ bên ngoài

Nếu chúng ta tạo một hàm để tải tài nguyên bên ngoài (như tập lệnh hoặc file), chúng ta 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 hàm gọi lại.

Ví dụ này bên dướ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 đủ.

Ví dụ

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function getFile(myCallback) {
  var req = new XMLHttpRequest();
  req.open('GET', "/exampleJS/mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(this.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}

getFile(myDisplayer);

Xem kết quả

Trong ví dụ trên, myDisplayer được sử dụng như một hàm gọi lại.

myDisplayer được chuyển đến hàm getFile() như một đối số.

Dưới đây là file mycar.html.

mycar.html

<img src="/images/img_car.jpg" alt="Nice car" style="width:100%">

<p>Ô tô là phương tiện giao thông có bánh, có động cơ dùng để vận chuyển.
Hầu hết các định nghĩa của thuật ngữ chỉ rõ rằng ô tô được thiết kế để chạy 
chủ yếu trên đường, có chỗ ngồi cho một đến tám người, thường có bốn bánh.</p>

<p>(Wikipedia)</p>