Mục lục
Hàm setTimeout và setInterval trong ECMAScript
Xem thêm các chuyên mục:
Nhóm phát triển của chúng tôi vừa ra mắt website
langlearning.net
học tiếng
Anh,
Nga,
Đức,
Pháp,
Việt,
Trung,
Hàn,
Nhật,
...
miễn phí cho tất cả mọi người.Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.
Facebook
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.
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() & clearTimeout() Function</h2>
<button onclick="startAction()">Show greeting</button>
<button onclick="cancelAction()">Cancel</button>
</body>
</html>
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() & clearInterval() Function</h2>
<button onclick="startAction()">Show greeting</button>
<button onclick="cancelAction()">Cancel</button>
</body>
</html>
*
