Nền tảng Kiến thức - Hành trang tới Tương lai | NenTang.vn

Chương 7-Bài 6. Bài tập Thực thi một hàm xử lý sau một khoảng thời gian bằng hàm setTimeout

Tác giả: Dương Nguyễn Phú Cường

Ngày đăng: 22/2/2025, 9:19

Lượt xem: 229

Hàm setTimeout()

Hàm setTimeout() của Javascript có nhiệm vụ thực thi hàm xử lý 1 lần duy nhất, sau 1 khoảng thời gian nào đó, tính bằng millisecond.

Cú pháp sử dụng:

var boDemThoiGianChay1Lan = setTimeout(
   function(){ 
     alert("Hello"); 
   }, 3000);

Hàm clearTimeout

Hàm clearTimeout() dùng để xóa bộ đếm thời gian chạy 1 lần khi không cần sử dụng nữa. Cú pháp sử dụng:

clearTimeout(boDemThoiGianChay1Lan);

Bài tập 1: hiển thị hộp thoại chào mừng sau khi người dùng ghé thăm trang web 5s

Yêu cầu

Sau khi người dùng ghé thăm trang web 5s, hiển thị hộp thoại bằng hàm alert() với nội dung: Chào mừng các bạn đến với trang web của chúng tôi!

Hướng dẫn

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Học JQuery | NenTang.vn</title>
</head>

<body>
  <!-- Phần trình bày Giao diện HTML - START -->

  <h1>Chào mừng các bạn đến với Trang web!</h1>

  <!-- Phần trình bày Giao diện HTML - END -->



  <!-- Phần xử lý code JavaScript - START -->
  <!-- Nên viết tất cả các đoạn xủ lý JavaScript vào phần cuối trang, trước khi đóng thẻ <body> là cách viết tốt nhất -->
  <!-- Liên kết thư viện Jquery -->
  <script src="vendor/jquery/jquery.min.js"></script>

  <!-- Viết code Jquery -->
  <script>
    // Tìm đối tượng (element) nào đó => yêu cầu thực thi Hành động gì đó (Action)
    // Cú pháp Jquery
    // $(selector).action();

    // Yêu cầu tiến trình Javascript đợi HTML render (vẽ ra giao diện) xong
    // -> JS mới thực thi
    $(document).ready(function (e) {

      // Hàm hiển thị hộp thoại chào mừng, với nội dung được truyền vào tham số `message`
      // Nhận vào 1 tham số `message`
      function chaoMung(message) {
        alert(message);
      }

      // Sử dụng hàm setTimeout() để thực thi hàm sau 1 khoảng thời gian (tính bằng milliseconds)
      setTimeout(
        function() {
          chaoMung('Chào mừng các bạn đến với trang web của chúng tôi!'); // Hàm cần thực thi
        },
        5000 // 5000ms = 5s
      );
    })
  </script>
  <!-- Phần xử lý code JavaScript - END -->
</body>

</html>