Trong JavaScript, một khối mã có thể được thực hiện trong khoảng thời gian cụ thể. Các khoảng thời gian này được gọi là sự kiện thời gian.
Có hai phương thức để thực hiện mã vào các khoảng thời gian cụ thể. Chúng là:
- setInterval()
- setTimeout()
Trong bài hướng dẫn này, bạn sẽ tìm hiểu về phương thức setInterval().
Phương thức setInterval() trong JavaScript
Phương thức setInterval() lặp lại một khối mã trong mỗi sự kiện thời gian cụ thể đã cho.
Cú pháp thường được sử dụng của setInterval() trong JavaScript là:
setInterval(function, milliseconds);
Các tham số của nó bao gồm:
- function – một hàm chứa một khối mã
- milliseconds – khoảng thời gian giữa việc thực thi của hàm
Phương thức setInterval() trả về một intervalID là một số nguyên dương.
Ví dụ 1: Hiển thị Văn Bản Mỗi 1 Giây Một Lần
// program to display a text using setInterval method
function greet() {
console.log('Hello world');
}
setInterval(greet, 1000);
Kết Quả
Hello world
Hello world
Hello world
Hello world
Hello world
....
Trong chương trình trên, phương thức setInterval() gọi hàm greet() mỗi 1000 mili giây ( 1 giây).
Do đó, chương trình hiển thị văn bản “Xin chào thế giới” mỗi 1 giây.
Lưu Ý : Phương thức setInterval() hữu ích khi bạn muốn lặp lại một khối mã nhiều lần. Ví dụ: hiển thị một thông báo sau một khoảng thời gian cố định.
Ví dụ 2: Hiển Thị Thời Gian Mỗi 5 Giây Một Lần
// program to display time every 5 seconds
function showTime() {
// return new date and time
let dateTime= new Date();
// return the time
let time = dateTime.toLocaleTimeString();
console.log(time)
}
let display = setInterval(showTime, 5000);
Kết Quả
"5:15:28 PM"
"5:15:33 PM"
"5:15:38 PM"
....
Chương trình trên hiển thị thời gian hiện tại mỗi 5 giây một lần.
new Date() trả về ngày và giờ hiện tại. Và toLocaleTimeString() trả về thời gian hiện tại.
JavaScript clearInterval()
Như bạn đã thấy trong ví dụ trên, chương trình thực hiện một khối mã vào mỗi khoảng thời gian cụ thể. Nếu bạn muốn dừng cuộc gọi hàm này, bạn có thể sử dụng phương thức clearInterval().
Cú pháp của phương thức clearInterval() là:
clearInterval(intervalID);
Ở đây, intervalID là giá trị trả về của phương thức setInterval().
Ví dụ 3: Sử Dụng Phương thức clearInterval()
// program to stop the setInterval() method after five times
let count = 0;
// function creation
let interval = setInterval(function(){
// increasing the count by 1
count += 1;
// when count equals to 5, stop the function
if(count === 5){
clearInterval(interval);
}
// display the current time
let dateTime= new Date();
let time = dateTime.toLocaleTimeString();
console.log(time);
}, 2000);
Kết Quả
4:47:41 PM
4:47:43 PM
4:47:45 PM
4:47:47 PM
4:47:49 PM
Trong chương trình trên, phương thức setInterval() được sử dụng để hiển thị thời gian hiện tại mỗi 2 giây. Phương thức clearInterval() dừng cuộc gọi hàm sau 5 lần.
Bạn cũng có thể truyền thêm đối số cho phương thức setInterval(). Cú pháp là:
setInterval(function, milliseconds, parameter1, ....paramenterN);
Khi bạn truyền thêm các tham số cho phương thức setInterval(), các tham số này (parameter1, parameter2, v.v.) sẽ được truyền cho hàm cụ thể.
Ví dụ,
// program to display a name
function greet(name, lastName) {
console.log('Hello' + ' ' + name + ' ' + lastName);
}
// passing argument to setInterval
setInterval(greet, 1000, 'John', 'Doe');
Kết Quả
Hello John Doe
Hello John Doe
Hello John Doe
....
Trong chương trình trên, hai tham số John và Doe được truyền vào phương thức setInterval(). Hai tham số này là các đối số sẽ được truyền cho hàm (ở đây là hàm greet()) được định nghĩa bên trong phương thức setInterval().
- Bài đăng blog này được xuất bản ban đầu tại:https://www.programiz.com/
