Bài 23: Time events trong javascript
Bài 23: 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 […]
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 đó:
functionlà hàm thực thi hành động.millisecondslà thời gian sau bao nhiêu mili giây thì thực hiệnfunction.
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>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 đó:
functionlà hàm thực thi hành động.millisecondslà thời gian sau bao nhiêu mili giây thì thực hiệnfunction.
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>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.
Lượt xem : 252
