Trong JavaScript, setTimeout() và setInterval() là hai phương thức được sử dụng để thực hiện các tác vụ theo thời gian. Chúng cho phép bạn lên lịch thực hiện một đoạn mã sau một khoảng thời gian nhất định hoặc thực hiện đoạn mã này lặp đi lặp lại ở các khoảng thời gian đều đặn.
setTimeout()
setTimeout() được sử dụng để thực hiện một đoạn mã chỉ một lần sau một khoảng thời gian trễ được chỉ định.
Cú pháp:
setTimeout(function, delay, [arguments]);
Tham số:
function: Hàm sẽ được thực thi sau khi thời gian trễ đã hết.delay: Thời gian trễ trước khi thực hiện hàm, tính bằng mili giây (ms). Ví dụ, 1000ms = 1 giây.[arguments] (tùy chọn): Các đối số bổ sung sẽ được truyền cho hàm khi nó được gọi.
Ví Dụ:
// Hiển thị thông báo sau 2 giây
setTimeout(function() {
console.log("Hello after 2 seconds!");
}, 2000);
// Với đối số
function greet(name) {
console.log(`Hello, ${name}!`);
}
setTimeout(greet, 1000, 'Alice'); // Hiển thị "Hello, Alice!" sau 1 giây
Hủy Bỏ setTimeout:
const timeoutId = setTimeout(function() {
console.log("This will not run.");
}, 5000);
// Hủy bỏ việc thực hiện hàm
clearTimeout(timeoutId);
setInterval()
setInterval() được sử dụng để thực hiện một đoạn mã lặp đi lặp lại ở các khoảng thời gian đều đặn.
Cú pháp:
setInterval(function, interval, [arguments]);
Tham số:
function: Hàm sẽ được thực hiện lặp đi lặp lại sau mỗi khoảng thời gian.interval: Khoảng thời gian giữa các lần thực hiện hàm, tính bằng mili giây.[arguments] (tùy chọn): Các đối số bổ sung sẽ được truyền cho hàm khi nó được gọi.
Ví Dụ:
// Hiển thị thông báo mỗi 3 giây
const intervalId = setInterval(function() {
console.log("Hello every 3 seconds!");
}, 3000);
// Với đối số
function countDown(seconds) {
console.log(`Countdown: ${seconds} seconds left.`);
}
setInterval(countDown, 1000, 10); // Hiển thị đếm ngược mỗi giây với giá trị bắt đầu là 10
// Dừng thực hiện sau 10 giây
setTimeout(function() {
clearInterval(intervalId);
console.log("Interval stopped.");
}, 10000);
Sự Khác Biệt Chính
setTimeout():
- Chạy hàm chỉ một lần sau thời gian trễ được chỉ định.
- Sử dụng khi bạn chỉ cần thực hiện một hành động sau một khoảng thời gian nhất định.
setInterval():
- Chạy hàm lặp đi lặp lại ở các khoảng thời gian đều đặn.
- Sử dụng khi bạn cần thực hiện hành động định kỳ.
Các Lưu Ý
Độ Chính Xác: Cả setTimeout() và setInterval() không đảm bảo độ chính xác tuyệt đối về thời gian. Chúng bị ảnh hưởng bởi việc xử lý sự kiện và các hoạt động khác của trình duyệt.
Quản Lý Tài Nguyên: Đảm bảo dừng các setInterval() không còn cần thiết nữa bằng cách sử dụng clearInterval(), để tránh rò rỉ bộ nhớ hoặc xử lý không cần thiết.
Chạy Hàm Đồng Bộ: Nếu hàm được thực hiện từ setTimeout() hoặc setInterval() thực hiện một tác vụ mất thời gian, bạn có thể cần phải quản lý thời gian trễ và lặp lại một cách hợp lý để tránh làm treo ứng dụng của bạn.
Việc hiểu và sử dụng setTimeout() và setInterval() một cách hiệu quả giúp bạn có thể điều khiển thời gian thực hiện các đoạn mã JavaScript một cách linh hoạt và chính xác.
