Trong hướng dẫn này, bạn sẽ tìm hiểu về phương thức JavaScript setInterval () với sự trợ giúp của các ví dụ.
Trong JavaScript, một khối mã có thể được thực thi trong các khoảng thời gian xác định. Những khoảng thời gian này được gọi là sự kiện định thời.
Có hai phương pháp để thực thi mã trong các 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ề setInterval()phương pháp.
JavaScript setInterval ()
Các setInterval()phương pháp lặp đi 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);
Các thông số của nó là:
- function - một hàm chứa một khối mã
- mili giây - khoảng thời gian giữa việc thực hiện hàm
Các setInterval()phương thức trả về một intervalID mà 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
Xin chào thế giới Xin chào thế giới Xin chào thế giới Xin chào thế giới Xin chào thế giới….
Trong chương trình trên, setInterval()phương thức gọi greet()hàm sau mỗi 1000 mili giây ( 1 giây).
Do đó, chương trình sẽ hiển thị dòng chữ Hello world cứ sau 1 giây một lần.
Lưu ý : setInterval()Phương pháp này 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 vào 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
“5:15:28 chiều” “5:15:33 chiều” “5:15:38 chiều”….
Chương trình trên hiển thị thời gian hiện tại cứ sau 5 giây một lần .
new Date()cho biết ngày và giờ hiện tại. Và toLocaleTimeString()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ờ trong JavaScript.
JavaScript clearInterval ()
Như bạn đã thấy trong ví dụ trên, chương trình thực thi một khối mã tại mọi khoảng thời gian xác định. Nếu bạn muốn dừng lệnh gọi hàm này, thì bạn có thể sử dụng clearInterval()phương pháp này.
Cú pháp của clearInterval()phương thức là:
clearInterval(intervalID);
Đây intervalIDlà giá trị trả về của setInterval()phương thức.
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);
Đầu ra
4:47:41 CH 4:47:43 CH 4:47:45 CH 4:47:47 CH 4:47:49 CH
Trong chương trình trên, setInterval()phương thức được sử dụng để hiển thị thời gian hiện tại sau mỗi 2 giây. Các clearInterval()phương pháp dừng cuộc gọi chức năng sau 5 lần.
Bạn cũng có thể chuyển các đối số bổ sung cho setInterval()phương thức. Cú pháp là:
setInterval(function, milliseconds, parameter1,… .paramenterN);
Khi bạn vượt qua các thông số bổ sung cho các setInterval()phương pháp, các tham số ( parameter1, parameter2, vv) sẽ được chuyển đến các quy định chức năng .
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');
Đầu ra
Xin chào John Doe Xin chào John Doe Xin chào John Doe….
Trong chương trình trên, hai tham số Johnvà Doeđược truyền cho setInterval()phương thức. Hai tham số này là các đối số sẽ được truyền cho hàm (ở đây là greet()hàm) được định nghĩa bên trong setInterval()phương thức.
Lưu ý: Nếu bạn chỉ cần thực thi một hàm một lần, tốt hơn nên sử dụng phương thức setTimeout ().
