Bộ hẹn giờ setTimeout() và setInterval() trong JavaScript

Trong bài hướng dẫn tự học Lập trình JavaScript này bạn sẽ được học về các bộ hẹn giờ (Timer functions)

Bộ hẹn giờ trong JavaScript

1. Bộ hẹn giờ là gì?

Bộ hẹn giờ (Timer) là một chức năng cho phép chúng ta thực hiện một chức năng tại một thời điểm cụ thể.

Sử dụng bộ hẹn giờ, bạn có thể trì hoãn việc thực thi code để nó không hoàn thành vào đúng thời điểm một sự kiện được kích hoạt hoặc khi trang được tải.

Ví dụ: Bạn có thể sử dụng bộ hẹn giờ để thay đổi các biểu ngữ quảng cáo trên trang web của mình theo khoảng thời gian đều đặn hoặc hiển thị đồng hồ thời gian thực, v.v.

Có hai hàm hẹn giờ trong JavaScript: setTimeout() và setInterval().

Phần tiếp sau đây sẽ hướng dẫn bạn cách tạo bộ hẹn giờ để trì hoãn việc thực thi codecũng như cách thực hiện lặp lại một hoặc nhiều hành động bằng cách sử dụng các hàm này trong JavaScript.

2. Thực thi code sau khi trì hoãn một thời gian với setTimout trong JavaScript

Hàm setTimeout() trong JavaScript được sử dụng để thực thi một hàm hoặc đoạn mã được chỉ định chỉ một lần sau một khoảng thời gian nhất định.

Cú pháp cơ bản của setTimeout là:

setTimeout(function, milliseconds)

Hàm này chấp nhận hai tham số:

    + Một hàm: Là hàm để thực thi

    + Một tham số tùy chọn để chỉ định độ trễ, là số mili giây thể hiện lượng thời gian chờ trước khi thực thi hàm (1 giây = 1000 mili giây).

Hãy xem cách nó hoạt động như thế nào qua ví dụ sau:

<script>
function myFunction() {
    alert('Hello World!');
}
</script>
 
<button onclick="setTimeout(myFunction, 3000)">Click thử ngay!</button>

Ví dụ trên sẽ hiển thị thông báo cảnh báo sau 3 giây khi click vào nút.

Lưu ý: Nếu tham số trễ bị bỏ qua hoặc không được chỉ định, giá trị 0 (mặc định) sẽ được sử dụng, điều đó có nghĩa là hàm đã chỉ định được thực thi 'ngay lập tức' hoặc càng sớm càng tốt.

3. Thực thi code sau khoảng thời gian đều đặn với setInterval trong JavaScript

Tương tự, bạn có thể sử dụng hàm setInterval() để thực thi một hàm hoặc đoạn mã được chỉ định lặp đi lặp lại vào những khoảng thời gian cố định.

Cú pháp cơ bản của setInterval là:

setInterval(function, milliseconds)

Hàm này cũng chấp nhận hai tham số:

    + Một hàm, là hàm để thực thi

    + Khoảng thời gian, là số mili giây biểu thị lượng thời gian chờ trước khi thực thi hàm (1 giây = 1000 mili giây).

Đây là một ví dụ:

<script>
function showTime() {
    var d = new Date();
    document.getElementById("time").innerHTML = d.toLocaleTimeString();
}
setInterval(showTime, 1000);
</script>
 
<p>Thời gian hiện tại (tính theo máy tính của bạn là): <span id="time"></span></p>

Ví dụ trên sẽ thực thi hàm showTime() lặp lại sau 1 giây.

Chức năng này sẽ lấy thời gian hiện tại trên máy tính của bạn và hiển thị trên trình duyệt.

4. Phương pháp dừng thực thi code hoặc hủy hẹn giờ

Cả hai phương thức setTimeout() và setInterval() đều trả về một ID duy nhất (một giá trị nguyên dương, được gọi là timer identifier) xác định bộ hẹn giờ được tạo bởi các phương thức này.

Sau khi có ID này, bạn có thể được sử dụng để tắt hoặc xóa bộ đếm thời gian và dừng việc thực thi mã trước đó.

Xóa bộ đếm thời gian có thể được thực hiện bằng cách sử dụng hai hàm: clearTimeout() và clearInterval().

Hãy xem ví dụ xóa việc thực thi hàm setTimout():

<script>
var timeoutID;

function delayedAlert() {
  timeoutID = setTimeout(showAlert, 3000);
}

function showAlert() {
  alert('Hàm setTimeout() được thực thi.');
}

function clearAlert() {
  clearTimeout(timeoutID);
}
</script>

<button onclick="delayedAlert();">Hiển thị thông báo sau 3s</button>
<button onclick="clearAlert();">Xóa thực thi hàm setTimeout</button>

Tương tự, phương thức clearInterval() được sử dụng để xóa hoặc vô hiệu hóa bộ hẹn giờ setInterval().

<script>
var intervalID;
 
function showTime() {
    var d = new Date();
    document.getElementById("time").innerHTML = d.toLocaleTimeString();
}

var intervalID = setInterval(showTime, 1000);

function stopClock() {
    clearInterval(intervalID);
}

</script>

<p>Thời gian hiện tại (tính theo máy tính của bạn là): <span id="time"></span></p>
<button onclick="stopClock();">Tạm dừng</button>

Lưu ý: Về mặt kỹ thuật, bạn có thể sử dụng thay thế clearTimeout() cho clearInterval(). Tuy nhiên, để đảm bảo tính rõ ràng và khả năng bảo trì, bạn nên tránh làm như vậy.

Như vậy là qua bài viết này, bạn đã biết cách sử dụng bộ hẹn giờ trong JavaScript thông qua hai phương thức setTimeout() và setInterval().

Cũng đơn giản thôi phải không?

Nhưng chỉ với 2 phương thức này, bạn có thể tạo ra nhiều chương trình thú vị cho ứng dụng của mình đấy.

Note: Nếu bạn đang quan tâm đến lập trình web thì tham khảo ngay KHÓA HỌC LẬP TRÌNH WEB (Full Stack). Học trong 12 tháng - Học chắc tay - Hành nghề ngay!