JavaScript - BOM Time Events
by My Love
01/04/2019, 8:33 AM | 01/04/2019, 8:33 AM | 881 | 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 :
<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 :
<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ụ :
<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ụ:
<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.