[NEWBIE] Xử lý bất đồng bộ trong JavaScript

Xử lý bất đồng bộ là một phần cực kỳ quan trọng trong JavaScript. Nếu bạn chỉ học JavaScript cơ bản

Nhưng nếu bạn đã có ý định học lập trình web, học JS cho đàng hoàng và học cả Front end Framework như học React, Angular, Vue thì chắc chắn bạn cần hiểu rõ về Xử lý bất đồng bộ.là một phần cực kỳ quan trọng trong JavaScript. Nếu bạn chỉrồi học Back end thì cũng chưa cần chăm sóc lắm chủ đề này, hoặc khi nào cần đến thì lại google tìm cách. Nhưng nếu bạn đã có dự tính học lập trình web, học JS cho đàng hoàng và học cả Front end Framework như học React, Angular, Vue thì chắc như đinh bạn cần hiểu rõ về

Xử lý bất đồng bộ trong JavaScript

Có nhiều cách để xử lý bất đồng bộ. Nhưng để nắm rõ chủ đề này trong lòng bàn tay thì tất cả chúng ta cần đi tìm hiểu và khám phá lần lượt từ :

Nào, tất cả chúng ta sẽ mở màn với phần tiên phong :

I. setTimeout() trong JavaScript

Trong phần này, mình sẽ giúp bạn tìm hiểu về phương thức setTimeout() qua các ví dụ minh họa.

Phương thức setTimeout() thực thi một block code sau thời gian được chỉ định. Phương thức này chỉ thực thi code một lần.

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


setTimeout(hamCanThucThi, miliGiay);
 

Các tham số của hàm setTimeout ( ) là :

  • hamCanThucThi – một hàm chứa một tác vụ nào đó cần được thực thi

  • miliGiay – thời gian mà sau đó hàm hamCanThucThi được thực thi

Hàm setTimeout() trả về một khoảng intervaID, là một số nguyên dương.

I.1. Ví dụ sử dụng hàm setTimeout() trong JavaScript

Để hiểu cách sử dụng setTimeout() chúng ta sẽ cùng tìm hiểu một vài ví dụ.

Đầu tiên, ví dụ hiển thị lời chào sau 3 giây (tức 3000 mili giây)


/ / Chương trình hiển thị lời chào

/ / sử dụng hàm setTimeout ( )

function chao() {

    console.log(‘ Chào bro ‘);

}

/ / Chạy hàm setTimeout ( )

setTimeout(chao, 3000);

console.log(” Đoạn text này sẽ hiển thị trước “);
 

Kết quả, trong console ta nhận được :


Đoạn text này sẽ hiển thị trước
Chào bro
 

Trong chương trình trên, hàm setTimeout() gọi hàm chao() sau 3000 mili giây (3 giây).

Do đó, chương trình chỉ hiển thị dòng chữ Hello world một lần sau 3 giây.

> Lưu ý: Hàm setTimeout() sẽ phù hợp khi bạn muốn thực thi một hàm 01 LẦN sau x Giây nào đó. Ví dụ: Hiển thị thông báo cho người dùng sau thời gian đã chỉ định.

Hàm setTimeout() trả về intervalID. Ví dụ:


/ / Chương trình hiển thị lời chào

/ / Sử dụng hàm setTimeout ( )

function chao() {

    console.log(‘ Chào bro ‘);

}

let intervalId = setTimeout(chao, 3000);

console.log(” ID : ” + intervalId);
 

Kết quả ta nhận được :


ID: 1
Chào bro
 

Đó là cách thực thi một lần, giờ đây nếu bạn muốn thực thi nhiều lần. Ví dụ, cứ mỗi 3 giây thì hiển thị thời hạn hiện tại thì sao ?


/ / Chương trình JS hiển thị thời hạn mỗi 3 s

/ / Sử dụng hàm setTimeout ( )

function xemThoiGian() {

    / / Trả về ngày giờ

    let ngayGio = new Date();

    / / Trả về thời hạn

    let thoiGian = ngayGio.toLocaleTimeString();

    console.log(thoiGian);

    / / Hiển thị thời hạn sau mỗi 3 s

    setTimeout(xemThoiGian, 3000);

}

/ / Gọi phương pháp

xemThoiGian();
 

Kết quả :


14:15:02
14:15:05
14:15:06
……..
 

Vừa nãy có xuất hiện khái niệm intervalID, chắc bạn cũng thắc mắc intervalID để làm gì đúng không?

Vâng, nó được sử dụng để định danh hàm setTimeout() tương ứng và trong trường hợp bạn muốn dừng nó lại, bạn có thể truyền nó vào hàm clearTimeout()

Ví dụ: Sử dụng hàm clearTimeout()


/ / Chương trình sử dụng clearTimeout ( )

/ / Để dừng setTimeout ( )

let x = 0;

/ / Hàm tăng x lên 1 đơn vị chức năng

/ / Và in ra màn hình hiển thị console

function tangBienX() {

    / / Tăng x lên 1

    x += 1;

    console.log(x);

}

/ / Tăng biến x lên 1 sau mỗi 3 s

/ / và trả về intervalID của setTimeout ( )

let intervalID = setTimeout(tangBienX, 3000);

/ / Dừng setTimeout ( ) bằng clearTimeout ( )

/ / và truyền intervalID vào

clearTimeout(intervalID);

console.log(” setTimeout ( ) đã dừng “);
 

Kết quả :


setTimeout() đã dừng
 

Trong chương trình trên, hàm setTimeout() được sử dụng để tăng giá trị của biến x sau 3 giây.

Tuy nhiên, hàm clearTimeout() đã dừng lệnh gọi hàm của hàm setTimeout(). Do đó, giá trị x không được tăng lên.

> Lưu ý: Bạn thường sử dụng phương thức clearTimeout() khi bạn cần hủy lệnh gọi hàm setTimeout() TRƯỚC KHI NÓ XẢY RA.

Ngoài cách sử dụng hàm setTimeout() đơn giản ở trên,

 

bạn cũng có thể chuyển các đối số bổ sung cho hàm setTimeout().

Cú pháp là:


/ / Chương trình hiển thị lời chào theo tên

function chao(ten, tuoi) {

    console.log(‘ Chào ‘ + ten + ‘ ‘ + tuoi + ‘ tuổi ‘);

}

/ / Truyền đối số vào setTimeout ( )

setTimeout(chao, 1000, ‘ Trang ‘, 18);
 

Kết quả :


Chào Trang 18 tuổi
 

> Lưu ý: Các tham số sẽ nhận giá trị của các đối số tương ứng. Do đó bạn cần truyền theo đúng thứ tự mà bạn đã khai báo ở hàm trước đó.

II. CallBack Function trong JavaScript

Trong phần này, chúng ta sẽ tìm hiểu về CallBack Function

Để bắt đầu, đây là một ví dụ, một block sẽ thực thi một tác vụ nào đó khi được gọi:


/ / Chương trình hiển thị lời chào theo tên

function chao(ten) {

    console.log(‘ Chào ‘ + ‘ ‘ + ten);

}

/ / Gọi phương pháp

chao(” Trang “);
 

Chúng ta thấy, trong chương trình trên, một chuỗi được truyền làm đối số cho phương thức chao()

Tuy nhiên, trong JavaScript, bạn cũng có thể truyền một hàm làm đối số cho một hàm khác.

Hàm này được truyền như một đối số bên trong một hàm khác được gọi là CallBack Function (Hàm gọi lại).

Ví dụ:


/ / Tạo 1 hàm

function chao(ten, callback) {

    console.log(‘ Chào ‘ + ‘ ‘ + ten);

    callback();

}

/ / Tạo CallBack Function

function hamCallBack() {

    console.log(” Đây là hàm CallBack “);

}

/ / Truyền CallBack Function vào hàm chao

chao(‘ Trang ‘, hamCallBack);
 

Kết quả :


Chào Trang
Đây là hàm CallBack
 

Chương trình trên có hai hàm :

  • Trong khi gọi hàm chao(), chúng ta truyền vào hai đối số (một chuỗi và một hàm).

Hàm hamCallBack() là một hàm gọi lại.

Lợi ích của CallBack Function

Lợi ích của việc sử dụng CallBack Function là bạn có thể đợi kết quả của một lệnh gọi hàm trước đó và sau đó thực hiện một lệnh gọi hàm khác.

Trong ví dụ sau, chúng ta sẽ sử dụng hàm setTimeout() để bắt chước chương trình cần thời gian để thực thi, chẳng hạn như chờ dữ liệu đến từ máy chủ.


/ / Chương trình trì hoãn thực thi

function chao() {

    console.log(‘ Chào bro ‘);

}

function chaoTheoTen(ten) {

    console.log(‘ Chào ‘ + ‘ ‘ + ten);

}

/ / Gọi hàm

setTimeout(chao, 2000);

chaoTheoTen(” Trang “);
 

Kết quả :


Chào Trang
Chào bro
 

Như bạn đã biết, hàm setTimeout() thực thi một block code sau thời gian được chỉ định.

Ở đây, hàm chao() được gọi sau 2000 mili giây (2 giây).

Trong thời gian chờ đợi này, hàm chaoTheoTen("Trang"); được thực thi.

Đó là lý do tại sao Chào Trang được in trước Chào bro

Đoạn code trên được thực thi bất đồng bộ

Hàm thứ hai chaoTheoTen() chạy mà không đợi hàm đầu tiên chao() hoàn thành.

Tuy nhiên, nếu bạn vẫn muốn đợi hiệu quả của lệnh gọi hàm trước đó trước rồi thực thi hàm tiếp theo, khi đó bạn hoàn toàn có thể sử dụng CallBack Function .

Ví dụ:


/ / Ví dụ Callback Function

function chao(ten, callBack) {

    console.log(‘ Chào bro ‘);

    / / callback function

    / / executed only after the greet ( ) is executed

    callBack(ten);

}

/ / CallBack Funtion

function chaoTheoTen(ten) {

    console.log(‘ Chào ‘ + ‘ ‘ + ten);

}

/ / Gọi hàm sau 2 giây

setTimeout(chao, 2000, ‘ Trang ‘, chaoTheoTen);
 

Kết quả :


Chào bro
Chào Trang
 

Trong chương trình trên, code được thực thi đồng bộ. Hàm chaoTheoTen() được truyền như một đối số cho hàm chao().

Sau 2 giây, hàm setTimeout() sẽ thực thi hàm chao().

Nếu như chương trình trước đã thực thi theo cách bất đồng bộ thì chương trình sau, với việc sử dụng CallBack Function, chúng ta đã có được chương trình thực thi đồng bộ.

> Lưu ý: CallBack Function rất hữu ích trong trường hợp bạn phải đợi kết quả rồi mới thực hiện hành động tiếp theo.

III. Promise và Promise Chaining

Mặc dù CallBack Function có thể xử lý tác vụ bất đồng bộ, nhưng đó không phải là cách tốt nếu như có nhiều CallBack.

Thay vào đó, có một cách tốt hơn và sử dụng Promise.

Promise được sử dụng để tìm hiểu xem tác vụ không đồng bộ có được thực hiện thành công hay không.

Promise là lời hứa và nó có 3 trạng thái.

Hãy lấy một ví dụ trong thực tế bạn hiểu về trạng thái của lời hứa: Bạn cho bạn mình vay tiền và nó hứa trả tiền bạn.

Lúc này, lời hứa có thể xảy ra 3 trường hợp:

  • Chờ thực thi lời hứa
  • Thực hiện lời hứa
  • Bùng, đéo trả

Tương ứng, đó là 3 trạng thái của promise :

  • Pending
  • Fulfilled
  • Rejected

Một lời hứa bắt đầu ở trạng thái đang Pending (chờ xử lý). Điều đó có nghĩa là quá trình này chưa hoàn tất.

Nếu quá trình thực hiện thành công, nó kết thúc ở trạng thái Fulfilled (hoàn thành). Và, nếu xảy ra lỗi, quá trình sẽ kết thúc ở trạng thái bị Reject (từ chối).

Ví dụ: Khi bạn yêu cầu dữ liệu từ máy chủ bằng cách sử dụng một Promise, nó sẽ ở trạng thái Pending. Khi nhận dữ liệu thành công, nó sẽ ở trạng thái Fulfilled. Nếu lỗi xảy ra, thì nó sẽ ở trạng thái Reject.

III.1. Tạo Promise trong JavaScript

Để tạo một đối tượng Promise, chúng ta sử dụng hàm tạo Promise()


const x = true;

/ / Tạo một Promise

let traNo = new Promise(function(resolve, reject) {

    if (x) {

        resolve(” Con nợ trả tiền “);

    } else {

        reject(” Bùng “);

}
} ) ;

console.log(traNo);
 

Kết quả :


promiseObject.then(onFulfilled, onRejected);
 

Để hiểu cách sử dụng phương thức then() chúng ta cùng làm một ví dụ sau:

 


/ / Trả về một promise

let traNo = new Promise(function(resolve, reject) {

    resolve(‘ Nợ được trả ‘);

} ) ;

/ / Thực thi sau khi Promise triển khai thành công xuất sắc

traNo.then(

    function thongBao(ketQua) {

        console.log(ketQua);

} ,
)

.then(

    function moiVayTiep() {

        console.log(” Mày vay tiền tiếp không ? “);

} ,

);
 

Kết quả:

 


Nợ được trả
Mày vay tiền tiếp không?
 

Trong chương trình trên, phương thức then() được sử dụng để xâu chuỗi các hàm với Promise.

Phương thức then() được gọi khi lời hứa được giải quyết thành công.

Bạn cũng có thể xâu chuỗi nhiều phương thức then() với Promise.

 

Phương thức catch()

Phương thức catch() được gọi lại khi Promise bị từ chối (reject) hoặc có lỗi xảy ra:

Ví dụ:


/ / Trả về một Promise

let traNo = new Promise(function(resolve, reject) {

    reject(‘ Bùng ‘);

} ) ;

/ / Thực thi khi Promise thực thi thành công xuất sắc

traNo.then(

    function thongBao(ketQua) {

        console.log(ketQua);

} ,
)

/ / Thực thi khi xảy ra lỗi

.catch(

    function thatHua(ketQua) {

        console.log(ketQua);

}

);
 

Kết quả :


Bùng
 

Trong chương trình trên, Promise không thực hiện được (reject). Và phương thức catch() được sử dụng để xử lý lỗi.

Phương thức finally ( )

Bạn có thể sử dụng phương thức finally() với promise. Phương thức finally() được thực hiện cho dù Promise có là resolved hay là rejected.

Ví dụ:


/ / Trả về một Promise

let traNo = new Promise(function(

resolve

, reject) {

    / / Có thể là resolved hoặc reject

    resolve(” Nợ được trả “);

} ) ;

/ / Sử dụng phương pháp finally ( )

traNo.finally(

    function chaoThanAi() {

        console.log(” Đéo khi nào cho vay lại “);

}

);
 

Kết quả :


Đéo bao giờ cho vay lại
 

Cho vay tiền mà cứ nơm nớp lo sợ như vậy thì đây là hành động cho dù nó có trả nợ hay không trả nợ.

:v. Đùa chút thôi, hãy tin tưởng vào bạn bè của mình bạn ạ.

III.2. Sự khác biệt của Promise và CallBack Function

Promise tương tự như CallBack Function, cả hai đều có thể sử dụng để xử lý bất đồng bộ trong JavaScript

Điểm khác biệt của Promise và CallBack Function như sau:

Đối với Promise:

  • Cú pháp thân thiện và dễ đọc hơn
  • Dễ quản trị, dễ xử lý lỗi hơn


api().then(function(result) {

    return api2();

}).then(function(result2) {

    return api3();

}).then(function(result3) {

    / / Làm gì đó

}).catch(function(error) {

    / / Xử lý nếu có lỗi xảy ra ở phần trước

});
 

Đối với CallBack Function :

  • Cú pháp khó hiểu
  • Khó xử lý lỗi


api(function(result) {

    api2(function(result2) {

        api3(function(result3) {

            / / Thực hiện việc làm

            if (error) {

                / / Làm gì đó

            } else {

                / / Làm gì đó

}
} ) ;
} ) ;

});
 

III.3. Một số phương thức khác của Promise

Đối tượng Promise được JavaScript cung cấp vẫn còn một số phương thức hữu ích khác.

Một số như phương thức như resolve(), reject(), then(), catch(), finally() bạn đã được học ở trên, đây là số còn lại:

  • all(iterable): Chờ tất cả các lời hứa được thực thi thành công hoặc bất kỳ cái nào bị từ chối

  • allSettled(iterable): Chờ cho đến khi tất cả lời hứa được giải quyết hoặc bị từ chối

  • any(iterable): Trả về giá trị lời hứa ngay sau khi bất kỳ một lời hứa nào được thực hiện

  • race(iterable): Chờ cho đến khi bất kỳ lời hứa nào được giải quyết hoặc bị từ chối

MDN.Để biết thêm cụ thể về cách sử dụng những phương pháp này, bạn hoàn toàn có thể xem trên

IV. Async / Await trong JavaScript

Async / Await là tính năng được giới thiệu trong JavaScript (ES8) để giúp cho việc xử lý bất đồng bộ trở nên dễ dàng hơn.

IV.1. Từ khóa async

Bạn sử dụng từ khóa async với một hàm để biểu thị rằng hàm đó là một hàm không đồng bộ.

Hàm async trả về một Promise.

Cú pháp của hàm async là:


/ / Ví dụ async function

async function f() {

    console.log(” Async Function “);

    return Promise.resolve(1);

}

/ / Gọi hàm

f();
 

Kết quả :


Async Function
 

Trong chương trình trên, từ khóa async được sử dụng trước hàm để biểu thị rằng hàm là không đồng bộ.

Vì hàm này trả về một lời hứa, bạn có thể sử dụng phương thức then() như sau:


/ / Ví dụ async function

async function f() {

    console.log(” Async Function “);

    return Promise.resolve(1);

}

/ / Sử dụng hàm then ( )

f().then(function(ketQua) {

    console.log(ketQua);

});
 

Kết quả :


Async Function
1
 

Trong chương trình trên, hàm f() được giải quyết và phương thức then() được thực thi.

IV.2. Từ khóa await

Từ khóa await được sử dụng bên trong hàm async để đợi hoạt động không đồng bộ.

Cú pháp để sử dụng await là:


let ketQua = await promise;
 

Việc sử dụng await sẽ tạm dừng hàm không đồng bộ cho đến khi Promise trả về kết quả (resolve hoặc reject).

Ví dụ:


/ / Hứa trả nợ

let traNo = new Promise(function(resolve, reject) {

    setTimeout(function() {

        resolve(” Nợ được trả “);

    }, 4000);

} ) ;

/ / Hàm async

async function asyncCamOn() {

    / / Đợi cho đến khi Promise triển khai thành công xuất sắc

    let ketQua = await traNo;

    console.log(ketQua);

    console.log(” Cảm ơn ! “);

}

/ / Gọi hàm async

asyncCamOn();
 

Kết quả :


Nợ được trả
Cảm ơn!
 

Trong chương trình trên, một đối tượng Promise được tạo và nó sẽ được giải quyết sau 4000 mili giây.

Ở đây, hàm asyncCamOn() là một hàm không đồng bộ async.

Từ khóa await sẽ bắt chương trình đợi Promise hoàn thành (resolve hoặc reject) sau đó mới thực thi câu lệnh tiếp theo.


let loiHua1;

let loiHua2;

let loiHua3;

async function asyncFunc() {

    let ketQua1 = await loiHua1;

    let ketQua2 = await loiHua2;

    let ketQua3 = await loiHua3;

    console.log(ketQua1);

    console.log(ketQua2);

    console.log(ketQua3);

}
 

Trong chương trình trên, await sẽ chờ đợi từng lời hứa hoàn thành.

IV.3. Xử lý lỗi

Trong khi sử dụng hàm không đồng bộ, bạn viết code theo cách đồng bộ. Và bạn cũng có thể sử dụng phương thức catch() để bắt lỗi.

Ví dụ:


/ / Một Promise

let traNo = new Promise(function(resolve, reject) {

    setTimeout(function() {

        resolve(” Nợ được trả “);

    }, 4000);

} ) ;

/ / Hàm async

async function asyncFunc() {

    try {

        / / Đợi Promise được xử lý

        let ketQua = await traNo;

        console.log(ketQua);

    } catch (error) {

        console.log(error);

}
}

/ / Gọi hàm async

asyncFunc();
 

Nếu chương trình chạy thành công, nó sẽ chuyển đến khối try. Và nếu chương trình ném ra một lỗi, nó sẽ chuyển đến khối catch.

Để tìm hiểu thêm về chi tiết try catch, hãy đọc hướng dẫn Try Catch trong JavaScriptTrong chương trình trên, tất cả chúng ta đã sử dụng try catch để xử lý những lỗi, nếu gặp phải. Nếu chương trình chạy thành công xuất sắc, nó sẽ chuyển đến khối. Và nếu chương trình ném ra một lỗi, nó sẽ chuyển đến khốiĐể khám phá thêm về chi tiết cụ thể try catch, hãy đọc hướng dẫnnày .

Lợi ích khi sử dụng async:

  • Code dễ đọc hơn so với CallBack Function và Promise
  • Xử lý lỗi đơn thuần hơn
  • Gỡ lỗi thuận tiện hơn

V. Hàm setInterval() trong JS

Trong JavaScript, một block code 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à timing event.

Có hai phương thức để thực thi code trong các khoảng thời gian cụ thể:

  • setInterval ( )
  • setTimeout()

setTimeout() thì bạn đã được tìm hiểu ở phần đầu, nhưng để tập trung vào xử lý bất đồng bộ nên để đến phần này mình mới giới thiệu về hàm setInterval()

V.1. Sử dụng hàm setInterval()

Nếu hàm setTimeout() thực thi một block code sau khoảng thời gian nhất định thì, hàm setInterval() thực thi một block code sau mỗi một khoảng thời gian nào đó.

Cú pháp sử dụng đơn giản của hàm setInterval() là:


/ / Chương trình sử dụng setInerval ( )

function chao() {

    console.log(” Chào bro “);

}

setInterval(chao, 1000);
 

Kết quả :


Chào bro
Chào bro
Chào bro
……..
 

Trong chương trình trên, phương thức setInterval() gọi hàm chao() 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 ý: Phương thức setInterval () hữu ích khi bạn muốn lặp lại một hành động 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.

Chúng ta sẽ thực thi thêm một ví dụ khác .

Ví dụ : Hiển thị thời hạn sau mỗi 5 s


/ / Chương trình hiển thị ngày và giờ

function xemThoiGian() {

    / / Trả về đối tượng người dùng Date Time

    let ngayVaGio = new Date();

    / / Trả về thời hạn

    let thoiGian = ngayVaGio.toLocaleTimeString();

    / / In ra thông tin thời hạn

    console.log(thoiGian);

}

/ / Sử dụng hàm setInterval ( )

/ / để hiển thị ngày giờ sau mỗi 5 s

let intervalID = setInterval(xemThoiGian, 5000);
 

Kết quả :


16:23:00
16:23:22
16:23:24
16:23:26
16:23:28
……..
 

Date Time trong JavaScript> Để hiểu hơn về Date Time bạn hoàn toàn có thể đọc hướng dẫn

V.2. Sử dụng clearInterval()

Như bạn đã thấy trong ví dụ trên, chương trình thực thi một block code 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 phương thức clearInterval().

Cú pháp của phương thức clearInterval() là:


clearInterval(intervalID);
 

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

Ví dụ: Sử dụng clearInterval()


/ / Chương trình hiển thị thời hạn sau mỗi 2 s

/ / sử dụng setInterval ( )

let x = 0;

/ / Tạo một hàm

let intervalID = setInterval(function() {

    / / Tăng x lên 1 đơn vị chức năng

    x += 1;

    / / Khi x bằng 5, dừng hàm

    if (x === 5) {

        clearInterval(intervalID);

}

    / / Hiển thị thời hạn hiện tại

    let ngayVaGio = new Date();

    let thoiGian = ngayVaGio.toLocaleTimeString();

    console.log(thoiGian);

}, 2000);
 

Kết quả :


16:30:10
16:30:15
16:30:20
16:30:25
16:30:30
 

Sau 5 lần in thời gian hiện tại ra màn hình console, chương trình đã bị dừng.

Ngoài cách sử dụng đơn giản của hàm setInterval() ở trên, bạn cũng có thể truyền thêm nhiều đối số vào hàm setInterval().

Cú pháp:


setInterval(hamCanThucThi, miliGiay, thamSo1, ….thamSoN);
 

Ví dụ : Truyền nhiều đối số vào hàm setInterbval ( )


/ / Chương trình chào theo tên

function chaoTheoTen(ten) {

    console.log(‘ Chào ‘ + ten);

}

/ / Truyền tham số vào trong setInterval ( )

setInterval(chaoTheoTen, 2000, ‘ Trang ‘);
 

Kết quả :


Chào Trang
Chào Trang
Chào Trang
……….
 

 

Nếu bạn truyền nhiều tham số, các tham số sẽ nhận đối số tương ứng.

> Lưu ý: Nếu bạn chỉ muốn thực thị một lần sau một khoảng thời gian, tốt hơn hết là sử dụng setTimeout()

Tổng kết về Xử lý bất đồng bộ trong JavaScript

Xử lý bất đồng bộ trong JavaScript, từ việc thực thi tác vụ sau một khoảng thời gian nhất định đến CallBack Function, Promise và Async / Await.

Đây là một hướng dẫn dài nhưng mình nghĩ rằng nó dễ hiểu và giúp các bạn mới bắt đầu nắm bắt cách xử lý bất đồng bộ dễ dàng hơn.

Hi vọng giúp ích được bạn kha khá trong quá trình HỌC LẬP TRÌNH WEB

Nếu bạn còn chưa hiểu lắm, hãy làm lại các ví dụ vài lần, hoặc để lại comment ngay dưới đây nhé. Đừng quên like và chia sẻ lên FB của bạn, bởi biết đâu sau này bạn lại cần đọc lại.

Chúc bạn thành công!Như vậy là qua bài hướng dẫn này mình đã giúp bạn chớp lấy được về chủ đề, từ việc thực thi tác vụ sau một khoảng chừng thời hạn nhất định đến CallBack Function, Promise và Async / Await. Đây là một hướng dẫn dài nhưng mình nghĩ rằng nó dễ hiểu và giúp những bạn mới mở màn nắm bắtdễ dàng hơn. Hi vọng giúp ích được bạn tương đối trong quá trìnhcủa bạn. Nếu bạn còn chưa hiểu lắm, hãy làm lại những ví dụ vài lần, hoặc để lại comment ngay dưới đây nhé. Đừng quên like và san sẻ lên FB của bạn, bởi biết đâu sau này bạn lại cần đọc lại. Chúc bạn thành công xuất sắc !

HỌC VIỆN ĐÀO TẠO CNTT NIIT – ICT HÀ NỘI

Học Lập trình chất lượng cao ( Since 2002 ). Học thực tiễn + Tuyển dụng ngay !

Đc : Tầng 3, 25T2, N05, Nguyễn Thị Thập, CG cầu giấy, TP. Hà Nội

SĐT : 02435574074 -0968051561

E-Mail : [email protected]

Fanpage: https://facebook.com/NIIT.ICT/

# niit # niithanoi # niiticthanoi # hoclaptrinh # khoahoclaptrinh # hoclaptrinhjava # hoclaptrinhphp