Trong JavaScript, một khối mã có thể được thực thi trong khoảng thời gian xác định. Những khoảng thời gian này được gọi là các sự kiện định thời
Có hai phương pháp để thực thi mã trong khoảng thời gian cụ thể. họ đang
- setInterval()
- setTimeout()
Trong hướng dẫn này, bạn sẽ tìm hiểu về phương pháp // program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);1
JavaScript setInterval()
Phương thức // program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);1 lặp lại một khối mã tại mọi sự kiện thời gian nhất định
Cú pháp thường được sử dụng của JavaScript setInterval là
setInterval(function, milliseconds);thông số của nó là
- chức năng - một chức năng chứa một khối mã
- mili giây - khoảng thời gian giữa các lần thực hiện chức năng
Phương thức // program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);1 trả về một intervalID là một số nguyên dương
ví dụ 1. Hiển thị một văn bản cứ sau 1 giây
// program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);đầu ra
Hello world Hello world Hello world Hello world Hello world ....Trong chương trình trên, phương thức // program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);1 gọi hàm // program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);5 cứ sau 1000 mili giây (1 giây)
Do đó cứ 1 giây chương trình lại hiển thị dòng chữ Hello world một lần
Ghi chú. Phương thức // program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);1 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 tin nhắn ở một khoảng thời gian cố định
ví dụ 2. Thời gian hiển thị cứ sau 5 giây
// 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);đầu ra
// program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);0Chương trình trên hiển thị thời gian hiện tại cứ sau 5 giây
// program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);7 đưa ra ngày giờ hiện tại. Và // program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);8 trả về thời gian hiện tại. Để tìm hiểu thêm về ngày và giờ, hãy truy cập Ngày và giờ JavaScript
ClearInterval JavaScript()
Như bạn đã thấy trong ví dụ trên, chương trình thực thi một khối mã ở mỗi khoảng thời gian xác định. Nếu bạn muốn dừng cuộc gọi hàm này, thì bạn có thể sử dụng phương thức // program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);9
Cú pháp của phương thức // program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);9 là
// program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);5Ở đây, Hello world Hello world Hello world Hello world Hello world ....1 là giá trị trả về của phương thức // program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);1
ví dụ 3. Sử dụng phương thức clearInterval()
// program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);8đầu ra
// program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);9Trong chương trình trên, phương thức // program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);1 được sử dụng để hiển thị thời gian hiện tại cứ sau 2 giây. Phương thức // program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);9 dừng gọi hàm sau 5 lần
Bạn cũng có thể truyền các đối số bổ sung cho phương thức // program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);1. Cú pháp là
setInterval(function, milliseconds);3Khi bạn chuyển các tham số bổ sung cho phương thức // program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);1, các tham số này (Hello world Hello world Hello world Hello world Hello world ....7, Hello world Hello world Hello world Hello world Hello world ....8, v.v. ) sẽ được chuyển đến chức năng được chỉ định
Ví dụ,
setInterval(function, milliseconds);7đầu ra
// program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);0Trong chương trình trên, hai tham số Hello world Hello world Hello world Hello world Hello world ....9 và // 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);0 được truyền cho phương thức // program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);1. Hai tham số này là đối số sẽ được truyền cho hàm (ở đây là hàm // 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);2) được định nghĩa bên trong phương thức // program to display a text using setInterval method function greet() { console.log('Hello world'); } setInterval(greet, 1000);1