JavaScript đồ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 được gọi là chạy song song (asynchronous)

Một ví dụ tốt là JavaScript setTimeout()

JavaScript chạy song song

Ví dụ được sử dụng trong chương trước đã được đơn giản hóa rất nhiều.

Mục đích của nó là để minh họa cú pháp của hàm gọi lại:

Ví dụ

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

thử nghiệm trực tiếp

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

Nó được truyền làm tham số cho myCalculator();。

Trong thế giới thực, hàm gọi lại thường được sử dụng cùng với các hàm chạy song song.

Một ví dụ điển hình là JavaScript setTimeout();。

Chờ thời gian chờ

Khi sử dụng hàm JavaScript setTimeout(); thì có thể chỉ định hàm gọi lại được thực thi khi quá thời gian chờ:

Ví dụ

setTimeout(myFunction, 3000);
function myFunction() {
  document.getElementById("demo").innerHTML = "Tôi yêu em !!";
}

thử nghiệm trực tiếp

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

hàm (tên hàm) được truyền làm tham số cho setTimeout();。

3000 là số miligiang trước khi timeout, vì vậy sau 3 giây sẽ gọi myFunction();。

Khi bạn truyền hàm làm tham số, hãy nhớ không sử dụng dấu ngoặc.

Đúng: setTimeout(myFunction, 3000);

Lỗi: setTimeout(myFunction(), 3000);

Nếu không truyền tên hàm làm tham số cho hàm khác, bạn luôn có thể truyền toàn bộ hàm:

Ví dụ

setTimeout(function() { myFunction("Tôi yêu em !!!"); }, 3000);
function myFunction(value) {}}
  document.getElementById("demo").innerHTML = value;
}

thử nghiệm trực tiếp

Trong ví dụ trên,function(){ myFunction("Tôi yêu bạn !!!"); } sử dụng làm hàm gọi lại. Nó là một hàm hoàn chỉnh. Hàm hoàn chỉnh được truyền làm tham số cho setTimeout().

3000 là số miligiang trước khi timeout, vì vậy sau 3 giây sẽ gọi myFunction();。

Chờ khoảng thời gian:

Khi sử dụng hàm JavaScript setInterval(); thì có thể chỉ định hàm gọi lại được thực thi 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();
}

thử nghiệm trực tiếp

Trong ví dụ trên,myFunction dùng làm hàm gọi lại.

hàm (tên hàm) được truyền làm tham số cho setInterval();。

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

Chờ tệp

Nếu bạn tạo các hàm để tải tài nguyên外部 (như script hoặc tệp), bạn không thể sử dụng chúng trước khi nội dung được tải hoàn toàn.

Đây là thời điểm tốt nhất để sử dụng hàm gọi lại.

Ví dụ này tải một tệp HTML (mycar.htmlvà hiển thị tệp HTML này trong trang web sau khi tệp đã được tải hoàn toàn:

Chờ 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);
    }
      myCallback("Lỗi: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

thử nghiệm trực tiếp

Trong ví dụ trên,myDisplayer dùng làm hàm gọi lại.

hàm (tên hàm) được truyền làm tham số cho getFile()。

Dưới đây là mycar.html sao chép:

mycar.html

<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>Xe ô tô là một phương tiện vận chuyển, xe gắn bánh xe, tự động, được sử dụng cho mục đích giao thông.</p>
<p>Hầu hết các định nghĩa về thuật ngữ này đều quy định rằng xe ô 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>