Lập lịch tác vụ trong JavaScript Sử dụng setTimeout & setInterval

---

Trong môi trường trình duyệt, cũng như với Node.js, ta nhận được hai phương thức trên đối tượng toàn cục giúp dễ dàng lên lịch các việc sẽ được thực hiện sau này: setTimeout và setInterval .

• setTimeout : Gọi một hàm một lần sau một khoảng thời gian được chỉ định.
• setInterval : Gọi một hàm liên tục ở một khoảng thời gian trễ xác định giữa mỗi cuộc gọi.

setTimeout

Phương thức setTimeout 2 đối số: tham chiếu đến hàm gọi lại và độ trễ tính bằng mili giây. Phần sau sẽ in thông báo tới console sau 1 giây:

setTimeout(() => {
  console.log('Alligator!!!!');
}, 1000);

Ví dụ trên sử dụng một biểu thức hàm nội tuyến, nhưng ta cũng có thể tham chiếu một hàm theo tên của nó:

function gator() {
  console.log('Alligator!!!!');
}

setTimeout(gator, 1000);

Lưu ý hàm không nên được gọi, nhưng thay vào đó, một tham chiếu đến hàm nên được sử dụng.

Đối số bổ sung

setTimeout có thể nhận các đối số bổ sung sau thời gian trễ và các giá trị bổ sung sẽ được chuyển vào hàm gọi lại:

function animal(animalName, extras = '!!!') {
  const name = animalName.charAt(0).toUpperCase() + animalName.slice(1);
  console.log(`${name}${extras}`);
}

setTimeout(animal, 2500, 'wolf', ' $#@%');

// Wolf $#@% (after 2.5 seconds)

Hủy hẹn giờ

Phương thức setTimeout trả về một id bộ định thời sau đó có thể được chuyển cho phương thức clearTimeout toàn clearTimeout để hủy thời gian chờ. Lấy ví dụ sau:

function animal(animalName, extras = '!!!') {
  const name = animalName.charAt(0).toUpperCase() + animalName.slice(1);
  console.log(`${name}${extras}`);
}

const animalTimer = setTimeout(animal, 800, 'wolf', ' $#@%');

setTimeout(() => {
  clearTimeout(animalTimer);
}, 250);

Với điều này, không có gì sẽ được in ra console , bởi vì bộ đếm thời gian thứ hai sẽ hủy bộ đếm đầu tiên trước khi bộ đếm thời gian đầu tiên có cơ hội chạy.

Thực thi với độ trễ 0ms

Một kỹ thuật phổ biến để cải thiện hiệu suất của mã JavaScript là đặt bộ hẹn giờ với các lệnh gọi setTimeout có độ trễ 0ms. Điều này thêm bộ đếm thời gian vào hàng đợi tin nhắn để mã chạy càng sớm càng tốt, ngay sau khi mã đồng bộ hiện tại và các tin nhắn trước đó trong hàng đợi hoàn tất thực thi, làm cho mã được thực thi với setTimeout không đồng bộ:

setTimeout(() => {
  console.log('Panda 🐼');
}, 0);

console.log('Koala 🐨');

// Koala 🐨
// Panda 🐼

Được sử dụng theo cách này, setTimeout có thể trở nên hữu ích để trì hoãn các việc có thể bị chặn.

Điều cần lưu ý ở đây là điều này cũng nghĩa là độ trễ được chỉ định với setTimeout không phải là đảm bảo và chỉ xác định lượng thời gian tối thiểu phải trôi qua. Nếu công cụ JS bận, mã có thể được thực thi muộn hơn nhiều.

Cũng lưu ý khi sử dụng giá trị 0 làm độ trễ, đối số thứ hai cho setTimeout có thể bị bỏ qua và 0 sẽ được ngụ ý.

setInterval

API cho setInterval khá giống với setTimeout . Cũng giống như setTimeout :

• Nó mong đợi 2 đối số: một hàm gọi lại và độ trễ tính bằng mili giây.
• Nó trả về một ID hẹn giờ và có thể gọi clearInterval với ID hẹn giờ để hủy hẹn giờ.
• Các đối số bổ sung có thể được chuyển vào và sau đó chúng sẽ được chuyển vào làm đối số cho hàm gọi lại.

Sự khác biệt là setInterval gọi hàm gọi lại nhiều lần với độ trễ được chỉ định ở giữa các cuộc gọi. Trong ví dụ sau, ta tăng một giá trị và in nó ra console mỗi giây:

let i = 0;

function increment() {
  i++;
  console.log(i);
}

setInterval(increment, 1000);

// 1
// 2
// 3
// ...

Các cuộc gọi setTimeout đệ quy

Đôi khi có thể hợp lý hơn nếu sử dụng bộ định thời gian setTimeout đệ quy thay vì bộ định thời gian setInterval . Đối với một, nếu các việc được thực hiện như một phần của bộ đếm thời gian mất nhiều thời gian, thì việc sử dụng setInterval có thể nghĩa là các việc sẽ không có độ trễ ở giữa vì độ trễ được tính từ khi bắt đầu tác vụ. Nếu sử dụng bộ hẹn giờ setTimeout định kỳ để thay thế, ta có toàn quyền kiểm soát thời điểm bắt đầu trì hoãn. Đây là một ví dụ về lời gọi setTimeout đệ quy:

let i = 0;

function increment() {
  i++;
  console.log(i);
}

let timer = setTimeout(function myTimer() {
  increment();
  timer = setTimeout(myTimer, 1000);
}, 1000);

// let's cancel after 7 seconds
setTimeout(() => {
  console.log('Cancelling');
  clearTimeout(timer);
}, 7000);

Lưu ý cách ta chỉ định lại giá trị của timer mỗi lần, để ta vẫn có thể hủy bộ hẹn giờ khi cần.

---

---

Các tin liên quan

Hiểu các lớp trong JavaScript
2018-05-04
Truy cập API Rails trong ứng dụng khách JavaScript bằng Rails Ranger
2018-03-15
Hiểu các biến, phạm vi và lưu trữ trong JavaScript
2018-02-20
Tìm hiểu Nguyên mẫu và Kế thừa trong JavaScript
2018-01-12
Khám phá đối tượng ngày JavaScript
2017-12-06
chuỗi con so với chuỗi con trong JavaScript
2017-11-06
Hiểu Ngày và Giờ trong JavaScript
2017-10-19
Cách xác định các hàm trong JavaScript
2017-10-09
Vòng lặp Đối với, Đối với ... Trong vòng lặp và Đối với ... Trong Vòng lặp trong JavaScript
2017-10-02
Vòng lặp Đối với, Đối với ... Trong vòng lặp và Đối với ... Trong Vòng lặp trong JavaScript
2017-10-02