Học javascript miễn phí | Làm cách nào để thêm độ trễ trong vòng lặp trong JavaScript? cho người mới

Sau đây Thế giới JS share cho ae một mẹo để làm việc với delay trong vòng lặp trong JS. JavaScript không cung cấp bất kỳ lệnh chờ nào để thêm độ trễ cho các vòng lặp nhưng chúng ta có thể làm như vậy bằng cách sử dụng phương thức setTimeout . Phương thức này thực thi một chức năng, sau khi đợi một số mili giây đã chỉ định. Ví dụ dưới đây minh họa cách thêm độ trễ vào các vòng lặp khác nhau:

• Đối với vòng lặp:

// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs


for (let i=0; i<10; i++) { 
   task(i); 
} 
  
function task(i) { 
  setTimeout(function() { 
      // Add tasks to do 
  }, 2000 * i); 
} 

Trong code ở trên, bạn phải thực hiện 2000 * i ở dòng 8 vì phương thức setTimeout bên trong vòng lặp không làm cho vòng lặp tạm dừng mà thực sự thêm độ trễ cho mỗi lần lặp. Hãy nhớ rằng tất cả các lần lặp bắt đầu thời gian của họ cùng nhau. Vì vậy, nếu chúng ta chỉ thực hiện 2000 ở đó, điều đó sẽ làm cho tất cả các lần lặp thực thi cùng nhau và nó sẽ chỉ gây ra độ trễ 2000 ms trong lần lặp đầu tiên và tất cả các lần lặp khác sẽ xảy ra ngay sau đó. Vì vậy, để tránh điều đó, chúng tôi thêm 0 vào đầu tiên, 2000 vào thứ hai, 4000 vào thứ ba và cứ tiếp tục như vậy.
Ví dụ: Chương trình đã cho bên dưới sẽ in từ 0 đến 9 trong bảng điều khiển sau 2 giây trễ cho mỗi số bằng cách sử dụng vòng lặp for .

// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs


for (let i=0; i<10; i++) { 
   task(i); 
} 
  
function task(i) { 
  setTimeout(function() { 
      console.log(i); 
  }, 2000 * i); 
} 

Đầu ra:

0
1
2
3
4
5
6
7
8
9

• Vòng lặp While: Khái niệm tương tự được áp dụng để thực hiện vòng lặp While đã cho bên dưới.

// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs


let i = 0; 
while (i < 10) { 
  task(i); 
   i++; 
} 
function task(i) { 
  setTimeout(function() { 
      // Add tasks to do 
  }, 2000 * i); 
} 

• Ví dụ: Chương trình đã cho bên dưới sẽ in từ 0 đến 9 trong bảng điều khiển sau 2 giây trễ cho mỗi số bằng cách sử dụng vòng lặp while.

// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs


let i = 0; 
while (i < 10) { 
  task(i); 
   i++; 
} 
function task(i) { 
  setTimeout(function() { 
      console.log(i); 
  }, 2000 * i); 
} 

• Đầu ra:

0
1
2
3
4
5
6
7
8
9

• Vòng lặp do-while: Khái niệm tương tự được áp dụng để tạo vòng lặp do-while đã cho bên dưới.

// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs


let i = 0; 
do { 
  task(i); 
  i++; 
} while (i < 5); 
function task(i) { 
  setTimeout(function() { 
    // Add tasks to do 
  }, 2000 * i); 
} 

• Ví dụ: Chương trình đã cho bên dưới sẽ in từ 0 đến 9 trong bảng điều khiển sau 2 giây trễ cho mỗi số bằng cách sử dụng vòng lặp do-while.

// https://vpsus.vn/
// https://www.facebook.com/groups/893052378563701
// https://twitter.com/thegioijs


let i = 0; 
do { 
  task(i); 
  i++; 
} while (i < 5); 
function task(i) { 
  setTimeout(function() { 
    console.log(i); 
  }, 2000 * i); 
} 

• Đầu ra:

0
1
2
3
4

Trên đây là tất cả những gì về  thêm độ trễ trong vòng lặp trong javascript mà bạn cần biết. Nếu bạn có bất kỳ câu hỏi liên quan tới thêm độ trễ trong vòng lặp, hãy chủ động liên hệ và inbox cho chúng tôi, để giúp đỡ bạn sớm nhất

Tiếp theo, hãy cùng Thế giới JS tìm hiểu thêm các kiến thức về Javascript trong các bài tiếp theo trong series học miễn phí Javascript từ cơ bản tới nâng cao.

Nếu bạn cảm thấy hữu ích và yêu thích Thế giới JS, hãy tham gia và theo dõi chúng tôi để nhận thêm nhiều kiến thức MIỄN PHÍ hơn nữa nhé:

• Group Facebook
• Fanpage
• Twitter
• Home page

Share to learn more than!