Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Xin chào các bạn, lại là homiedev đây 🥳. Trong bài viết trước chúng ta đã tìm hiểu về setTimeout() trong JavaScript là gì?, tiếp tục chủ đề bất đồng bộ trong JavaScript thì hôm nay chúng ta sẽ tìm hiểu về setInterval() trong JavaScript nhé!

Javascript setInterval()

Method setInterval() trong JavaScript giúp lặp lại một khối code sau khoảng thời gian đã chỉ định.

Cú pháp thường sử dụng của setInterval() tương tự như setTimeout() là:

setInterval(function, milliseconds);

Trong đó:

  1. function - một hàm chứa khối code
  2. milliseconds - lặp lại một khối code sau khoảng thời gian này

Method setInterval() trả về một intervalID là một số nguyên dương.

Ví dụ 1:

Trong ví dụ này, chúng ta sẽ hiển thị dòng chữ sau mỗi 2s (2000 milliseconds) nhé.

function displayText() {
    console.log('blog homiedev.com, chào các bạn!');
}

setInterval(displayText, 2000);

Kết quả ví dụ trên:

blog homiedev.com, chào các bạn!
blog homiedev.com, chào các bạn!
blog homiedev.com, chào các bạn!
....

Method setInterval() ở trên gọi hàm displayText() sau mỗi 2s. Do đó, chương trình sẽ hiển thị dòng chữ blog homiedev.com, chào các bạn! 2 giây một lần.

Trong setInterval(), chúng ta truyền một callback functiondisplayText. Callback function là gì các bạn có thể tìm hiểu tại bài viết này nhé ^^: Callback Function trong JavaScript là gì? tại sao lại được sử dụng nhiều như vậy?.

Method setInterval() hữu ích khi chúng ta muốn lặp lại một khối code nhiều lần. Ví dụ: hiển thị thời gian (bao gồm giây).

Ví dụ 2:

Trong ví dụ này chúng ta sẽ hiển thị thời gian sau khoảng thời gian cho trước nhé:

// hiển thị thời gian sau 3s
function showTime() {
    let dateTime = new Date();

    // lấy time
    let time = dateTime.toLocaleTimeString();
    console.log(time)
}

let display = setInterval(showTime, 3000);

Kết quả:

07:49:13
07:49:16
07:49:19
...

clearInterval() trong JavaScript

Như bạn đã thấy trong ví dụ trên, chương trình sẽ thực thi một khối code tại khoảng thời gian đã chỉ định. Nếu muốn dừng lệnh gọi hàm này, chúng ta có thể sử dụng method clearInterval().

Cú pháp của method clearInterval() là:

clearInterval(intervalID);

Ở đây, intervalID là giá trị trả về của method setInterval().

Ví dụ 3:

let count = 0;

// chúng ta có thể viết luôn function trong setInterval
let interval = setInterval(function(){
    count += 1;

    // khi count = 3, dừng thực thi hàm
    if(count === 3){
        clearInterval(interval);
    }

    // lấy time và hiển thị
    let dateTime = new Date();
    let time = dateTime.toLocaleTimeString();
    console.log(time);

}, 1000);

Kết quả:

07:57:11
07:57:12
07:57:13

Trong đoạn code trên, method setInterval() được sử dụng để hiển thị thời gian hiện tại sau mỗi 1 giây. Method clearInterval() sẽ dừng lệnh gọi hàm sau 3 lần.

Chúng ta cũng có thể thêm các đối số bổ sung (additional arguments) cho setInterval() với cú pháp:

setInterval(function, milliseconds, parameter1, ....paramenterN);

Khi bạn thêm các đối số bổ sung vào setInterval(), các đối số này (parameter1, ....paramenterN) sẽ được truyền cho function.

Ví dụ:

function greet(name) {
    console.log(`Xin chào ${name}`);
}

setInterval(greet, 1000, 'Thanh');

Kết quả:

Xin chào Thanh
Xin chào Thanh
Xin chào Thanh
...

Ở đoạn code trên, giá trị Thanh được truyền vào method setInterval(). Giá trị này sẽ được truyền vào hàm greet() và kết quả ta được như trên.

Nếu các bạn chỉ cần thực thi hàm một lần, chúng ta nên sử dụng method setTimeout().


Như vậy là chúng ta đã tìm hiểu xong method setInterval() rồi. Hi vọng bài viết giúp ích cho các bạn. Đừng quên theo dõi blog homiedev để đọc những bài viết sắp tới nhe 😋.

Có thể bạn thích ⚡
homiedev
About Me

Hi, I'm @devnav. Một người thích chia sẻ kiến thức, đặc biệt là về Frontend 🚀. Trang web này được tạo ra nhằm giúp các bạn học Frontend hiệu quả hơn 🎉😄.

Chúc các bạn tìm được kiến thức hữu ích trong blog này 😁😁.