JavaScript - BOM Time Events

01/04/2019, 8:33 AM | 01/04/2019, 8:33 AM | 911 | 033

setTimeout() và setInterval() là 2 hàm sử lý thời gian rất hay dùng trong Javascript. Bài này chúng ta cùng tìm hiểu nhé.
1. setTimeout() trong Javascript
Hàm setTimeout() dùng để thiết lập một khoảng thời gian trước khi bạn muốn hàm của mình được thực thi. Và nó chỉ được thực hiện 1 lần.
Cú pháp như sau :

setTimeout ( expression, timeout );

Trong đó:
- expression là một hàm nào đó bạn muốn thực thi.
- timeout : là khoảng thời gian tính bằng mili giây expression sẽ được thực thi.
Ví dụ: sau 3 giây sẽ hiện lên câu xin chào

function Hello(){
    alert('Xin chào');
}

setTimeout(Hello, 3000);

Nếu hàm Hello() có tham số truyền vào thì bạn có thể viết theo các cách sau :

Xem DEMO

<html>
    <head>
        
        <script language="javascript">
           function hello(Title){
              alert(Title);
           }
          
           setTimeout(hello, 3000, 'Xin chào');
        </script>
    </head>
    <body>
        
    </body>
</html>

hoặc như sau :

Xem DEMO

<html>
    <head>
        
        <script language="javascript">
           function hello(Title){
              alert(Title);
           }
          
           setTimeout(() => hello('Xin chào'), 3000);
        </script>
    </head>
    <body>
        
    </body>
</html>

Hàm clearTimeout() trong Javascript
Khi muốn dừng hàm setTimeout() thì ta sử dụng hàm clearTimeout(). Chú ý lúc này bạn phải đặt hàm setTimeout() vào một biến cụ thể.
Ví dụ :

Xem DEMO

<html>
    <head>
        
        <script language="javascript">
           function hello(){
              alert('Xin chào !');
           }
          
           var x = setTimeout(hello, 3000);
          
           function clearTime(){
              clearTimeout(x);
              document.write('đã hủy');
           }
        </script>
    </head>
    <body>
        <input type="button" onclick="clearTime()" value="Hủy Time Out" />
    </body>
</html>

2. Hàm setInterval() trong Javascript
Hàm setInterval() giống với setTimeout() nhưng số lần thực hiện được lặp lại. Tức là cứ sau 1 khoảng thời gian lại gọi lại hàm.
Cú pháp như sau :

setInterval ( expression, Time);

Ví dụ : cứ sau 3 giây lại hiện lên câu xin chào

<html>
    <head>
        
        <script language="javascript">
           function hello(){
              alert('Xin chào !');
           }
          
           setInterval(hello, 3000);
           
        </script>
    </head>
    <body>
       
    </body>
</html>

Hàm clearInterval() trong Javascript
Để dừng hàm setInterval() ta dùng hàm clearInterval(). Tương tự như clearTimeout() thì ta cũng phải gán clearInterval() trong một biến thì mới clear được.
Ví dụ:

Xem DEMO

<html>
    <head>
        
        <script language="javascript">
           function hello(){
              alert('Xin chào !');
           }
          
           var x = setInterval(hello, 3000);
          
           function clearTime(){
              clearInterval(x);
              document.write('đã hủy setInterval()');
           }
        </script>
    </head>
    <body>
        <input type="button" onclick="clearTime()" value="Hủy Time Out" />
    </body>
</html>

Như vậy setTimeout() và setInterval() tương đối dễ hiểu, nó chỉ khác nhau ở số lần thực hiện mà thôi.