setInterval trong JavaScript

1. setInterval trong JavaScript là gì
2. setInterval ứng dụng thực tế
3. Cú pháp setInterval
4. Ví dụ đơn giản nhất về setInterval
5. Làm thế nào để dừng setInterval
6. Sự khác biệt giữa setInterval và setTimeout
7. Ví dụ thực tế về setInterval

1. setInterval trong JavaScript là gì

setInterval trong JavaScript là một hàm được sử dụng để thực thi một hàm hoặc đoạn mã lặp lại sau một khoảng thời gian nhất định, với một chu kỳ cố định.

Hàm này giúp bạn tự động thực thi lặp đi lặp lại mà không cần phải gọi lại thủ công.

2. setInterval ứng dụng thực tế

- Lấy dữ liệu từ Server thường xuyên.
- Kiểm tra hành động người dùng.
- Cập nhật thời gian: Hiển thị thời gian hiện tại theo thời gian thực (ví dụ đồng hồ số).
- Tạo các hiệu ứng động: Ví dụ, tạo các hiệu ứng slide ảnh hoặc thay đổi màu sắc theo thời gian.
- Kiểm tra điều kiện định kỳ: Kiểm tra trạng thái của một ứng dụng hoặc server sau mỗi khoảng thời gian.
 

3. Cú pháp setInterval

setInterval(function, delay, arg1, arg2, ...)

    function: Hàm hoặc đoạn mã sẽ được thực thi sau mỗi khoảng thời gian delay.
    delay: Khoảng thời gian (tính bằng miligiây) giữa mỗi lần thực thi hàm.
    arg1, arg2, ...: Các đối số tùy chọn (nếu có) mà bạn muốn truyền vào hàm khi thực thi.

4. Ví dụ đơn giản nhất về setInterval

Dưới đây là một ví dụ về cách sử dụng setInterval để in ra một thông báo mỗi 2 giây.

setInterval(function() {
    console.log("Đây là thông báo lặp lại sau 2 giây");
}, 2000); // 2000ms = 2 giây

Trong ví dụ này, hàm console.log("Đây là thông báo lặp lại sau 2 giây") sẽ được gọi mỗi 2 giây.
Sử dụng với đối số:

Bạn cũng có thể truyền các đối số vào hàm khi sử dụng setInterval.

function greet(name) {
    console.log("Hello " + name);
}

setInterval(greet, 3000, "Alice"); // Gọi greet("Alice") mỗi 3 giây

5. Làm thế nào để dừng setInterval

setInterval trả về một ID duy nhất cho mỗi lần gọi. Bạn có thể sử dụng ID này với clearInterval để dừng việc thực thi định kỳ.

const intervalId = setInterval(function() {
    console.log("Đang thực thi...");
}, 1000); // Lặp lại mỗi 1 giây

// Dừng việc lặp lại sau 5 giây
setTimeout(function() {
    clearInterval(intervalId);
    console.log("Dừng lặp lại!");
}, 5000); // Sau 5 giây, dừng setInterval

Trong ví dụ trên:

    setInterval sẽ lặp lại việc in ra "Đang thực thi..." mỗi giây.
    Sau 5 giây, clearInterval(intervalId) sẽ dừng việc lặp lại.

6. Sự khác biệt giữa setInterval và setTimeout

    setInterval: Thực thi hàm liên tục sau mỗi khoảng thời gian xác định.
    setTimeout: Thực thi hàm chỉ một lần sau một khoảng thời gian xác định.

 

7. Một số ví dụ thực tế về setInterval

  xx

Tìm kiếm: