setTimeout() trong JavaScript là gì? tìm hiểu thông qua ví dụ

Trong những bài viết trước, chúng ta đã tìm hiểu các nội dung liên quan đến JavaScript ES6 như: Spread Operator Javascript, ES6 Template String là gì?, Arrow Function JavaScript có gì hay?,... các bạn có thể xem lại những nội dung về ES6 ở các link trên nhé 🥳.

Hôm nay chúng ta sẽ cùng đến với các bài viết về chủ đề Asynchronous hay bất đồng bộ trong JavaScript. Những thứ như setTimeout(), Promise, async/await trong quá trình sử dụng JavaScript chúng ta sẽ sử dụng nhiều. Các bạn nên nắm chắc kiến thức phần này nhé ^^. Bây giờ cùng bắt đầu với setTimeout() trong JavaScript nhé!

setTimeout() trong Javascript

Method setTimeout() trong JavaScript thực thi một khối code sau một khoảng thời gian cho trước. Method này chỉ thực thi (execute) code một lần.

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

setTimeout(function, milliseconds);

Trong đó:

1. function - một hàm chứa khối code.
2. milliseconds - sau thời gian này, hàm sẽ được thực thi.

Method setTimeout() return về một intervalID, là một số nguyên dương.

Ví dụ sử dụng setTimeout()

Ví dụ 1:

Ở ví dụ này, chúng ta sẽ thực hiện hiển thị văn bản một lần sau 2 giây.

function greet() {
    console.log('Xin chào, các bạn đang đọc bài viết tại blog homiedev.com');
}

// sau 2 giây sẽ thực hiện hiển thị văn bản
setTimeout(greet, 2000);
console.log('đoạn văn bản này sẽ hiển thị trước!');

Trong chương trình trên, method setTimeout() sẽ gọi hàm greet() sau 2000 mili giây (2 giây). Do đó, chương trình chỉ hiển thị một lần dòng chữ Xin chào, các bạn ... blog homiedev.com sau 2 giây.

Kết quả chúng ta sẽ được:

đoạn văn bản này sẽ hiển thị trước!
Xin chào, các bạn đang đọc bài viết tại blog homiedev.com

method setTimeout () sẽ tiện khi các bạn muốn thực thi một đoạn code một lần sau một thời gian đã chỉ định. Ví dụ: hiển thị một dialog mời người dùng đăng ký nhận thông tin từ blog homiedev.com sau thời gian đã chỉ định.

Method setTimeout() sẽ return về intervalID.

Ví dụ:

function displayText() {
    console.log('Mình là Trang');
}

let intervalId = setTimeout(displayText, 3000);
console.log('Id: ' + intervalId);   

Kết quả:

Id: 338
Mình là Trang

Ví dụ 2:

Ở ví dụ này, chúng ta sẽ hiển thị khoảng thời gian hiện tại nhé.

function showTime() {
    let dateTime = new Date();

    // trả về thời gian hiện tại
    let time = dateTime.toLocaleTimeString();
    console.log(time)

    setTimeout(showTime, 3000);
}

// gọi hàm
showTime();

Kết quả:

07:52:18
07:52:21
07:52:24
.....

Điểm đặc biệt ở chương trình trên là chúng ta dùng showTime() gọi chính nó nên chương trình sẽ hiển thị time sau mỗi 3 giây. Lúc này chương trình sẽ chạy vô thời hạn (cho đến khi hết bộ nhớ).

Nếu cần thực thi một hàm nhiều lần, tốt hơn chúng ta nên sử dụng method setInterval().

clearTimeout() trong JavaScript

Khi thực hiện thực thi một khối mã với khoảng thời gian cho trước, sẽ có lúc chúng ta muốn dừng quá trình thực thi. Lúc này ta sẽ sử dụng method clearTimeout().

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

clearTimeout(intervalID);

Trong đó, intervalID là giá trị trả về của method setTimeout().

Ví dụ:

let count = 0;

function increaseCount(){
    count += 1;
    console.log(count)
}

let id = setTimeout(increaseCount, 2000);

// sử dụng clearTimeout
clearTimeout(id); 
console.log('Đã dừng setTimeout.');

Trong chương trình trên, setTimeout() được sử dụng để tăng giá trị của count sau 2 giây. Tuy nhiên, chúng ta đã gọi clearTimeout() nên nó sẽ dừng lệnh gọi hàm của setTimeout(). Do đó, giá trị count sẽ không được tăng lên.

Chúng ta có thể thêm các additional arguments (đối số bổ sung) cho setTimeout() như sau:

setTimeout(function, milliseconds, param1, ....paramN);

Khi chúng ta thêm các đối số bổ sung cho setTimeout(), các đối số này (param1, param2, ...) sẽ được đưa đến function.

Ví dụ:

function displayBlogInfo(name) {
    console.log(`Chào các bạn, đây là blog ${name} có các bài viết về Front-End`);
}

// thên các đối số vào setTimeout
setTimeout(displayBlogInfo, 2000, 'homiedev.com');

Kết quả đoạn code trên:

Chào các bạn, đây là blog homiedev.com có các bài viết về Front-End

Trong chương trình trên, giá trị homiedev.com được truyền cho setTimeout(). Giá trị này sẽ được truyền cho hàm displayBlogInfo(name) mà mình định nghĩa.

Các bạn có thể luyện tập thêm về setTimeout() trong các project của homiedev nhé: 🔥 Javascript Projects 🌈.

Hi vọng bài viết giúp ích cho các bạn! chúng ta có thể trao đổi về các kiến thức liên quan dưới phần bình luận nhé 😋. Chúc các bạn học tốt!