Trong lập trình ứng dụng, sẽ có rất nhiều lúc chúng ta cần thực hiện các tác vụ theo lịch là một rất quan trọng. Không ngoại lệ, là một ngôn ngữ được sử dụng rộng rãi, Javascript cũng hỗ trợ những hàm quan trọng để chúng ta có thể thực hiện các tác vụ này. Trong bài viết này, chúng ta sẽ tìm hiểu về 2 hàm setTimeout và setInterval để lập lịch thực hiện các tác vụ trong Javascript.

1. Lập lịch tác vụ là gì?

Lập lịch tác vụ (task scheduling) là quá trình xác định thời điểm mà tác vụ cụ thế sẽ được thực hiện. Trong lập trình, việc lập lịch tác vụ là một phần quan trọng để tổ chức và quản lý các hoạt động trong ứng dụng. Thông qua qua việc lập lịch, bạn có thể điều khiển các tác vụ để thực hiện vào thời gian mong muốn, dựa trên các sự kiện, khoảng thời gian hoặc điều kiện cụ thể.

Có một số trường hợp khi lập lịch tác vụ rất hữu ích:

1. Tương tác người dùng: Khi người dùng thao tác với các thành phần trong ứng dụng, sẽ có những lúc ta cần có các tác vụ thực hiện sau khi người dùng thực hiện một hành động cụ thể trên trang web hoặc ứng dụng.

2. Cập nhật dữ liệu định kỳ: Trong các website chúng ta luôn có những dữ liệu cần lấy từ server, có một số dữ liệu chúng ta sẽ cần từ động cập nhật lại dữ liệu sau một khoảng thời gian nhất định.

3. Hiển thị thông báo: Ta có thể sử dụng lập lịch để hiển thị thông báo hoặc thực hiện các function như đồng hồ đếm ngược.

4. Quản lý thời gian: Ta có thể sử dụng lập lịch tác vụ để quản lý các sự kiện theo thời gian, ví dụ như lịch làm việc, sự kiện, ...

2. setTimeout() trong Javascript

Hàm setTimeout() đúng như cái tên của nó, hàm này sẽ thực hiện một tác vụ được định sẵn sau khoảng thời gian nhất định. Điều này sẽ hữu dụng khi bạn muốn thực hiện các tác vụ như: cập nhật nội dung sau khi người dùng đã xem trang trong một thời gian nhất định hoặc tạo bộ đếm giờ, …

Cú pháp:

setTimeout(function, delay);

Ví dụ 

<h1 id="elUpdate">Đây là content sẽ bị thay thế sau 2 giây</h1>

setTimeout(function() {
    document.getElementById("elUpdate").innerHTML = "CÔNG TY CỔ PHẦN STRINGEE";
}, 2000);

Đây là content sẽ bị thay thế sau 2 giây

<script>
    setInterval(function() {
        const textRoot = "Đây là content sẽ bị thay thế sau 2 giây";
        const textUpdate = "CÔNG TY CỔ PHẦN STRINGEE";
        if (document.getElementById('myElement').innerHTML === textRoot) {
            document.getElementById('myElement').innerHTML = textUpdate;
        } else {
            document.getElementById('myElement').innerHTML = textRoot;
        }
    }, 2000);
</script>

Chú ý: Chúng ta có thể sử dụng clearTimeout để dừng thực thi hàm setTimeout

// Hành động sẽ thực hiện sau 3 giây
const timeoutId = setTimeout(function() {
    console.log("Hàm chạy");
}, 3000);

// Dừng hành động nếu cần thiết
const stop = function(id) {
    clearTimeout(id);
    console.log("Hàm đã dừng");
};

// Gọi hàm dừng hàm setTimeout sau 2 giây
setTimeout(function() {
    stop(timeoutId);
}, 2000);

Xem thêm bài viết về chủ đề ngôn ngữ lập trình:

- Hàm trong JavaScript và cách xây dựng
- Javascript ES6 là gì? Đặc điểm của phiên bản EcmaScript 6
- Sử dụng và tối ưu hóa vòng lặp trong JavaScript

3. setInterval() trong Javascript

Với hàm setInterval() cho phép chúng ta thực hiện một hành động cụ thể sau mỗi khoảng thời gian cố định. Hành động này sẽ được lặp đi lặp lại liên tục không dừng. Điều này thường được sử dụng để cập nhật một thông tin định kỳ hoặc hiển thị các yếu tố động trên trang web.

Cú pháp:

setInterval(function, interval);

Ví dụ: Tạo đồng hồ đếm giờ với setInterval()

<h1 id="timeView">0</h1>

let count = Number(document.getElementById('timeView').innerHTML);
setInterval(function() {
    document.getElementById("timeView").innerHTML = ++count;
}, 1000);

0

<script>
    let count = Number(document.getElementById('timeView').innerHTML);
    setInterval(function() {
        document.getElementById('timeView').innerHTML = ++count;
    }, 1000);
</script>

Chú ý: Chúng ta có thể sử dụng clearInterval để dừng thực thi hàm setInterval

// Hành động được thực thi sau mỗi 1 giây
const intervalId = setInterval(function() {
    console.log("Hàm được chạy sau 1 giây");
}, 1000);

// Dừng thực hiện hàm sau 5 giây
setTimeout(function() {
    clearInterval(intervalId);
    console.log("Hàm đã dừng");
}, 5000);

4. Lưu ý khi sử dụng

Khi sử dụng setTimeout() và setInterval() có một số lưu ý cần nhớ:

  1. Ngừng thực hiện: Bạn có thể dừng thực hiện của cả hai hàm bằng cách sử dụng các hàm clearTimeout và clearInterval tương ứng.
  2. Hiệu năng và tương tác người dùng: Vì các tính năng này được lặp đi lặp lại hoặc cần một thời gian chờ. Những hành động này đều có thể ảnh hưởng đến hiệu năng và tương tác của người dùng, đặc biệt khi các tác vụ thực hiện mất thời gian dài. Hãy cân nhắc và sử dụng có chọn lọc chúng một cách thận trong và tối ưu.
  3. Tránh lỗi: Đảm bảo rằng bạn không tạo ra quá nhiều lịch bị trùng lặp, gây ra các vấn đề trong quản lý mã.

Tổng kết

Dựa vào trên các ví dụ đã đưa ra ở trên, chúng ta có thể thấy rằng setTimeout và setInterval là hai công cụ mạnh mẽ trong Javascript để lập lịch thực hiện các tác vụ. Chỉ cần nắm vững những kiến thức cơ bản này, chúng ta có thể sử dụng chúng một cách hiệu quả, từ đó tạo ra những web động, tương tác tốt hơn và hiệu quả hơn về hiệu năng cho ứng dụng web. Tuy nhiên, hãy luôn cân nhắc về hiệu năng và tương tác người dùng khi sử dụng các phương pháp lập lịch này.. Hy vọng từ những kiến thức trên sẽ giúp cho bạn có thể sử dụng setTimeout và setInterval trong Javascript một cách hiệu quả nhất.

Stringee Communication APIs là giải pháp cung cấp các tính năng như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài chăm sóc khách hàng có thể tích hợp trực tiếp vào các ứng dụng/website của doanh nghiệp nhanh chóng. Bộ giải pháp này giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Mời quý bạn đọc đăng ký dùng thử và nhận tư vấn tại đây: