Bài 24: setTimeout, setInterval – xử lý thời gian trong JavaScript

Tiếp tục với Bài 26 – Hàm setTimeout, setInterval và xử lý thời gian trong JavaScript. Đây là phần cực kỳ quan trọng nếu bạn muốn tạo tác vụ chạy trễ hoặc chạy lặp lại theo chu kỳ, như đồng hồ, slideshow, thông báo…

1. setTimeout() – Chạy một lần sau một khoảng thời gian

📋 CopysetTimeout(function () {
  console.log("Chạy sau 2 giây")
}, 2000) // 2000ms = 2 giây

Dùng khi bạn muốn trì hoãn một hành động

2. setInterval() – Chạy lặp lại theo chu kỳ

📋 CopysetInterval(function () {
  console.log("Lặp mỗi 1 giây")
}, 1000)

Dùng cho đồng hồ, đếm ngược, slide tự động…

3. Dừng setInterval() với clearInterval

📋 Copylet count = 0
let timer = setInterval(() => {
  console.log("Đếm: " + count)
  count++

  if (count === 5) {
    clearInterval(timer)
  }
}, 1000)

4. Dừng setTimeout() với clearTimeout

📋 Copylet t = setTimeout(() => {
  console.log("Sẽ không chạy nếu bị hủy")
}, 3000)

clearTimeout(t) // hủy trước khi chạy

5. Ví dụ thực tế – Đếm ngược 5 → 0

📋 Copylet countdown = 5
let id = setInterval(() => {
  console.log(countdown)
  countdown--
  if (countdown < 0) {
    clearInterval(id)
    console.log("Hết giờ!")
  }
}, 1000)

6. Giao diện học (code + output)

Tóm tắt bài 26

Bạn đã học:

• setTimeout() để chạy một lần sau một thời gian
• setInterval() để chạy lặp lại liên tục
• Dùng clearTimeout, clearInterval để hủy
• Rất hữu ích cho hiệu ứng, timer, slideshow, game…

Bài tập

1. Tạo setTimeout in ra "Chào sau 3 giây"
2. Tạo setInterval đếm từ 1 → 10, mỗi giây 1 số
3. Dừng đếm khi đạt tới 10 bằng clearInterval
4. Viết đếm ngược từ 10 về 0 và in "Hết giờ!"