Setinterval là gì

Hàm setInterval() sẽ gọi một hàm khác (hoặc một đoạn code) cứ sau một khoảng thời gian ấn định. Hàm này trả về ID của quá trình gọi này. Giá trị ID được dùng để ngắt quá trình gọi lặp lại này bằng hàm clearInterval(ID)

Cú pháp:

var intervalID = setInterval(func, delay);

func là hàm sẽ được gọi sau mỗi khoảng thời gian delay (tính theo đơn vị mili giây)

Ví dụ sau cứ 3 giây lại hiện popup có nội dung Hi, sau khi hiện thị 5 lần thì ngắt quá trình gọi lặp lại này

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ư

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

setInterval(displayText, 2000);
1 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

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

setInterval(displayText, 2000);
4 sau mỗi 2s. Do đó, chương trình sẽ hiển thị dòng chữ
function displayText() {
    console.log('blog homiedev.com, chào các bạn!');
}

setInterval(displayText, 2000);
5 2 giây một lần.

Trong setInterval(), chúng ta truyền một callback function là

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

setInterval(displayText, 2000);
7. 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é:

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

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

setInterval(displayText, 2000);
9.

Cú pháp của method

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

setInterval(displayText, 2000);
9 là:

clearInterval(intervalID);

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

Ví dụ 3:

Kết quả:

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

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

setInterval(displayText, 2000);
9 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ị

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!
....
6 được truyền vào method setInterval(). Giá trị này sẽ được truyền vào hàm
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!
....
8 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 😋.

clearTimeout để làm gì?

Khi ta muốn dừng hàm trước thời gian đã đặt ở phương thức setTimeout() , ta gọi phương thức clearTimeout() để tiến hành ngăn chặn không cho hàm chạy.

clearInterval trong JS là gì?

clearInterval() trong JavaScript Phương thức clearInterval() được sử dụng để xóa nhiệm vụ mà ta đã thiết lập trong phương thức setInterval() .

Timer JavaScript là gì?

Bộ hẹn giờ (Timer) một chức năng cho phép chúng ta thực hiện một chức năng tại một thời điểm cụ thể. Sử dụng bộ hẹn giờ, bạn có thể trì hoãn việc thực thi code để nó không hoàn thành vào đúng thời điểm một sự kiện được kích hoạt hoặc khi trang được tải.