Sự kiện định thời gian JavaScript: setTimeout và setInterval

Các lập trình viên sử dụng các sự kiện thời gian để trì hoãn việc thực thi mã nhất định hoặc để lặp lại mã ở một khoảng thời gian cụ thể.

Có hai hàm riêng trong thư viện JavaScript được sử dụng để hoàn thành các tác vụ này: setTimeout() và setInterval().

setTimeout

setTimeout() được sử dụng để trì hoãn việc thực hiện chức năng đã truyền trong một khoảng thời gian xác định.

Có hai tham số mà bạn chuyển đến setTimeout(): hàm bạn muốn gọi, và lượng thời gian tính bằng mili giây để trì hoãn việc thực thi hàm.

Hãy nhớ rằng có 1000 mili giây (ms) trong 1 giây, vì vậy 5000 ms bằng 5 giây.

setTimeout() sẽ thực thi hàm từ đối số đầu tiên một lần sau khi hết thời gian đã chỉ định.

Ví dụ:

let timeoutID;

function delayTimer() {
  timeoutID = setTimeout(delayedFunction, 3000);
}

function delayedFunction() {
  alert(“Three seconds have elapsed.”);
}

Khi mà delayTimer chức năng được gọi là nó sẽ chạy setTimeout. Sau 3 giây (3000 ms) trôi qua, nó sẽ thực thi delayedFunction mà sẽ gửi một cảnh báo.

setInterval

Sử dụng setInterval() để chỉ định chức năng lặp lại với thời gian trễ giữa các lần thực hiện.

Một lần nữa, hai tham số được truyền cho setInterval(): hàm bạn muốn gọi, và lượng thời gian tính bằng mili giây để trì hoãn mỗi lần gọi hàm .

setInterval() sẽ tiếp tục thực hiện cho đến khi nó bị xóa.

Ví dụ:

let intervalID;

function repeatEverySecond() {
  intervalID = setInterval(sendMessage, 1000);
}

function sendMessage() {
  console.log(“One second elapsed.”);
}

Khi mã của bạn gọi hàm repeatEverySecond nó sẽ chạy setInterval. setInterval sẽ chạy chức năng sendMessage mỗi giây (1000 ms).

ClearTimeout và ClearInterval

Ngoài ra còn có các chức năng riêng tương ứng để dừng các sự kiện thời gian: clearTimeout() và clearInterval().

Bạn có thể nhận thấy rằng mỗi chức năng hẹn giờ ở trên được lưu vào một biến. Khi một trong hai setTimeout hoặc setInterval hàm chạy, nó được gán một số được lưu vào biến này. Lưu ý rằng JavaScript thực hiện tất cả điều này trong nền.

Số được tạo này là duy nhất cho từng phiên bản của bộ hẹn giờ. Số được chỉ định này cũng là cách xác định bộ hẹn giờ khi bạn muốn dừng chúng. Vì lý do này, bạn phải luôn đặt bộ đếm thời gian của mình thành một biến.

Để rõ ràng về mã của bạn, bạn phải luôn khớp clearTimeout() đến setTimeout() và clearInterval() đến setInterval().

Để dừng bộ hẹn giờ, hãy gọi hàm xóa tương ứng và chuyển cho nó biến ID bộ hẹn giờ khớp với bộ hẹn giờ bạn muốn dừng. Cú pháp cho clearInterval() và clearTimeout() giống nhau.

Ví dụ:

let timeoutID;

function delayTimer() {
  timeoutID = setTimeout(delayedFunction, 3000);
}

function delayedFunction() {
  alert(“Three seconds have elapsed.”);
}

function clearAlert() {
  clearTimeout(timeoutID);
}