Time events trong javascript

Bài này mình sẽ giới thiệu với mọi người các hàm xử lý sự kiện theo khoảng thời gian trong javscript. Cụ thể chúng ta sẽ tìm hiểu về bốn hàm setTimeout() - clearTimeout(), setIntelvar() - clearInterval().

1, setTimeout() - clearTimeout().

setTimeout()

-Hàm setTimeout() có tác dụng thực thi hành động sau khoảng thời gian nào đó, và nó chỉ thực hiện đúng một lần.

Cú Pháp:

setTimeout(function, milliseconds);

Trong đó:

function là hàm thực thi hành động.
milliseconds là thời gian sau bao nhiêu mili giây thì thực hiện function.

VD: Mình sẽ viết hàm setTimout() sao cho khi bạn load trang web được 3 giây thì nó sẽ alert ra thông báo chào.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com time events</title>
</head>
<body>
    <div>Đợi 3 giây để xem kết quả</div>
    <script type="text/javascript">
        setTimeout(function(){
            alert('Chào mừng bạn đã đến với website toidicode.com');
        },3000);
    </script>
</body>
</html>

Xem Kết Quả

clearTimeout()

-Hàm này sẽ có tác dụng hủy hành động của hàm setTimeout().

Cú Pháp:

clearTimeout(timeout);

Trong đó: timeout là biến mà hàm setTimeout() được gán.

VD: Mình sẽ hủy hàm setTimout() ở VD trên.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com time events</title>
</head>
<body>
    <div>Đợi 3 giây để xem kết quả</div>
    <script type="text/javascript">
        var timeout = setTimeout(function(){
            alert('Chào mừng bạn đã đến với website toidicode.com');
        },3000);
        clearTimeout(timeout);
    </script>
</body>
</html>

2, setIntervar() - clearIntervar().

setIntervar()

-Hàm này cũng có chức năng là thực hiện hành động sau khoản thời gian bao nhiêu giây, nhưng nó sẽ thực hiện lại nhiều lần như một vòng lặp, cứ sau mỗi khoảng thởi gian mà chúng ta xác định nó sẽ lại thực hiện lại.

Cú Pháp:

setInterval(function, milliseconds);

Trong đó:

function là hàm thực thi hành động.
milliseconds là thời gian sau bao nhiêu mili giây thì thực hiện function.

VD: Mình sẽ viết hàm setInterval() sao cho cứ 1 giây thì lại in ra số mới (số mới = số cũ +1).

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com time events</title>
</head>
<body>
    <div>Đợi 1 giây để xem kết quả</div>
    <p id="result">0</p>
    <script type="text/javascript">
        var result = document.getElementById('result');
        var i = 1;
        setInterval(function(){
            result.innerText = i;
            i++; 
        },1000);
    </script>
</body>
</html>

Xem Kết Quả

clearIntelval()

-Hàm này cũng giống như hàm clearTimeout() là có tác dụng hủy hành động của hàm setInterval().

Cú Pháp:

clearInterval(interval);

Trong đó: interval là tên biến chứa hàm setIntervar() mà ta muốn hủy.

VD: Mình sẽ hủy hàm setInterval() ở trên.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com time events</title>
</head>
<body>
    <div>Đợi 1 giây để xem kết quả</div>
    <p id="result">0</p>
    <script type="text/javascript">
        var result = document.getElementById('result');
        var i = 1;
        var interval = setInterval(function(){
            result.innerText = i;
            i++; 
        },1000);
        clearInterval(interval);
    </script>
</body>
</html>

3, Lời kết.

-Qua phần này các bạn cần chú ý về sự khác nhau giữa 2 hàm setInterVal() và setTimeout() là gì? Và nguyên tắc hoạt động của nó. Bài tiếp theo chúng ta sẽ tìm hiểu về đối tượng date trong javascript.