Hàm setTimeout và setInterval trong JavaScript

Hàm setTimeout()
Hàm setInterval()

Trong ECMAScript, setTimeout(func, time) và setInterval(func,time) là hai hàm khá giống nhau, nó hẹn giờ để thực hiện một nhiệm vụ nào đó. Trong bài học này tôi sẽ thảo luận lần lượt về từng hàm này.

1. Hàm setTimeout()

Hàm setTimeout(func, delay) thiết lập một khoảng thời gian 'delay' mili giây, khi khoảng thời gian này trôi qua hàm func sẽ được gọi duy nhất một lần.

Chú ý: 1 giây = 1000 mili giây.

Cú pháp:

setTimeout(func, delay)

func: Hàm này sẽ được gọi sau khoảng thời gian 'delay' mili giây.
delay: Khoảng thời gian trễ (Tính bằng mili giây)

Dưới đây là ví dụ đơn giản với hàm setTimeout(). Sau 3 giây kể từ khi người dùng nhấn vào nút "Show greeting" một lời chào sẽ hiển thị.

setTimeout-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>setTimeout function</title>
      <script type="text/javascript">
         function greeting()  {
              alert("Hello Everyone!");
         }
         function startAction()  {
            setTimeout(greeting, 3000); // 3 seconds.
         }
      </script>
   </head>
   <body>
      <h2>setTimeout Function</h2>
      <button onclick="startAction()">Show greeting</button>
   </body>
</html>

Một ví dụ khác với hàm setTimeout(), bạn có thể chạy ví dụ này trên môi trường NodeJS:

setTimeout-example.js

console.log("3");
console.log("2");
console.log("1");
console.log("Call setTimeout!");

setTimeout( function() {
  console.log("Hello Everyone!");
}, 3000); // 3 seconds

console.log("End!");

clearTimeout()

Giả sử bạn gọi hàm setTimeout() để hẹn giờ thực hiện một nhiệm vụ nào đó, trong khi nhiệm vụ chưa bắt đầu thực hiện bạn có thể hủy nhiệm vụ đó bằng cách gọi hàm clearTimeout().

clearTimeout-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>clearTimeout function</title>
      <script type="text/javascript">
         var myTask = null;
         function greeting()  {
              alert("Hello Everyone!");
              myTask = null;
         }
         function startAction()  {
            if(!myTask) {
               myTask = setTimeout(greeting, 3000); // 3 seconds.
            }
         }
         function cancelAction()  {
            if(myTask)  {
               clearTimeout(myTask);
               myTask = null;
            }
         }
      </script>
   </head>
   <body>
      <h2>setTimeout() &amp; clearTimeout() Function</h2> 
      <button onclick="startAction()">Show greeting</button>
      <button onclick="cancelAction()">Cancel</button>
   </body>
</html>

2. Hàm setInterval()

Hàm setInterval(func, delay) thiết lập một khoảng thời gian 'delay' mili giây, sau mỗi 'delay' mili giây hàm func lại được gọi.

Cú pháp:

setInterval(func, delay)

func: Hàm này sẽ được gọi sau mỗi khoảng thời gian 'delay' mili giây.
delay: Khoảng thời gian trễ (Tính bằng mili giây)

Dưới đây là ví dụ đơn giản với hàm setInterval(). Sau 3 giây kể từ khi người dùng nhấn vào nút "Show greeting" một lời chào sẽ hiển thị, và nó lại hiển thị tiếp sau 3 giây,..

setInterval-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>setInterval function</title>
      <script type="text/javascript">
         function greeting()  {
              alert("Hello Everyone!");
         }
         function startAction()  {
              setInterval(greeting, 3000); // 3 seconds.
         }
      </script>
   </head>
   <body>
      <h2>setInterval Function</h2> 
      <button onclick="startAction()">Show greeting</button>
   </body>
</html>

Một ví dụ khác với hàm setInterval(), bạn có thể chạy ví dụ này trên môi trường NodeJS:

setInterval-example.js

console.log("3");
console.log("2");
console.log("1");
console.log("Call setInterval!");

setInterval( function() {
   console.log("Hello Everyone!");
}, 3000); // 3 seconds

console.log("End!");

clearInterval()

Giả sử bạn gọi hàm setInterval() để hẹn giờ thực hiện một nhiệm vụ nào đó, bạn có thể hủy nhiệm vụ đó bằng cách gọi hàm clearInterval().

clearInterval-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>clearInterval function</title>
      <script type="text/javascript">
         var myTask = null;
         function greeting()  {
              alert("Hello Everyone!");
         }
         function startAction()  {
              if(!myTask)  {
                  myTask = setInterval(greeting, 3000); // 3 seconds.
              }
         }
         function cancelAction()  {
              if(myTask) {
                 clearInterval(myTask);
                 myTask = null;
              }
         }
      </script>
   </head>
   <body>
      <h2>setInterval() &amp; clearInterval() Function</h2>

      <button onclick="startAction()">Show greeting</button>
      <button onclick="cancelAction()">Cancel</button>
   </body>
</html>

Hàm setTimeout và setInterval trong JavaScript

1. Hàm setTimeout()

2. Hàm setInterval()

Các hướng dẫn ECMAScript, Javascript

Các hướng dẫn ECMAScript, Javascript

Các bài viết mới nhất