4.1 Hàm setTimeout
Timers trong JavaScript cho phép thực hiện các hành động nhất định sau những khoảng thời gian đã định. Hai phương thức chính
để làm việc với timers là setTimeout() và setInterval(). Chúng được sử dụng để thực hiện
mã với độ trễ hoặc qua các khoảng thời gian đều đặn.
Phương thức setTimeout() cho phép thực hiện một hàm một lần sau một số mili giây nhất định.
Nó hữu ích cho việc thực hiện mã trễ.
Cú pháp:
const timeoutID = setTimeout(callback, delay, ...args);
Ở đâu:
callback: hàm sẽ được thực hiệndelay: độ trễ tính bằng mili giây trước khi thực hiện hàmargs: các tham số bổ sung sẽ được truyền vào hàmcallback
Ví dụ về việc sử dụng setTimeout():
// Hàm sẽ được thực hiện sau 2 giây
function greet() {
console.log('Xin chào, thế giới!');
}
// Thiết lập timer
const timeoutID = setTimeout(greet, 2000);
4.2 Hủy timer setTimeout
Nếu cần hủy thực hiện hàm đã được lập lịch thông qua setTimeout(), bạn có thể sử dụng phương thức clearTimeout():
// Hàm sẽ được thực hiện sau 2 giây
function greet() {
console.log('Xin chào, thế giới!');
}
// Thiết lập timer
const timeoutID = setTimeout(greet, 2000);
// Hủy timer
clearTimeout(timeoutID);
Ví dụ với tham số bổ sung:
// Hàm sẽ được thực hiện sau 2 giây với tham số
function greet(name) {
console.log(`Xin chào, ${name}!`);
}
// Thiết lập timer và truyền tham số
const timeoutID = setTimeout(greet, 2000, 'Alice');
4.3 Hàm setInterval
Phương thức setInterval() cho phép thực hiện hàm lặp lại qua những khoảng thời gian đã định. Nó hữu ích
cho việc thực hiện mã định kỳ.
Cú pháp:
const intervalID = setInterval(callback, delay, ...args);
Ở đâu:
callback: hàm sẽ được thực hiệndelay: khoảng thời gian tính bằng mili giây giữa các lần gọi hàmargs: các tham số bổ sung sẽ được truyền vào hàmcallback
Ví dụ về việc sử dụng setInterval:
// Hàm sẽ được thực hiện mỗi 2 giây
function greet() {
console.log('Xin chào, thế giới!');
}
// Thiết lập interval
const intervalID = setInterval(greet, 2000);
4.4 Hủy interval setInterval
Nếu cần dừng việc thực hiện hàm lặp lại, bạn có thể sử dụng phương thức clearInterval().
// Hàm sẽ được thực hiện mỗi 2 giây
function greet() {
console.log('Xin chào, thế giới!');
}
// Thiết lập interval
const intervalID = setInterval(greet, 2000);
// Hủy interval sau 10 giây
setTimeout(() => {
clearInterval(intervalID);
console.log('Interval đã bị hủy');
}, 10000);
Ví dụ với tham số bổ sung:
// Hàm sẽ được thực hiện mỗi 2 giây với tham số
function greet(name) {
console.log(`Xin chào, ${name}!`);
}
// Thiết lập interval và truyền tham số
const intervalID = setInterval(greet, 2000, 'Alice');
4.5 Ví dụ sử dụng thực tế
Ví dụ 1: Cập nhật thời gian tự động
<!DOCTYPE html>
<html>
<head>
<title>Auto-update Time</title>
</head>
<body>
<h1>Current Time</h1>
<div id="time"></div>
<script>
function updateTime() {
const now = new Date();
const timeString = now.toLocaleTimeString();
document.getElementById('time').textContent = timeString;
}
// Cập nhật thời gian mỗi giây
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html>
Ví dụ 2: Yêu cầu dữ liệu định kỳ
// Hàm để mô phỏng yêu cầu dữ liệu
function fetchData() {
console.log('Đang yêu cầu dữ liệu...');
// Ở đây có thể thực hiện yêu cầu thực tế đến server
}
// Thực hiện yêu cầu dữ liệu mỗi 10 giây
const intervalID = setInterval(fetchData, 10000);
// Dừng yêu cầu sau 1 phút
setTimeout(() => {
clearInterval(intervalID);
console.log('Đã dừng yêu cầu dữ liệu');
}, 60000);
GO TO FULL VERSION