Javacfscript setInterval()

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 thời gian.

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 – a function containing a block of code
• milliseconds – the time interval between the execution of the function

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

Hello world
Hello world
Hello world
Hello world
Hello world
....

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 hiển thị văn bản Chào thế giớicứ 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ị 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);

Đầu ra

"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 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 PM
4:47:43 PM
4:47:45 PM
4:47:47 PM
4:47:49 PM

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

Hello John Doe
Hello John Doe
Hello 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 () .