Phương thức setTimeout và setInterval là hai phương thức dùng để xử lý thời gian trong javascript. Xử lý như nào thì chúng ta phải đi vào tìm hiểu thôi :D. Nhẫn đạo của mình là tuy ngắn mà gọn và mình là anonymous-4 😀
Phương thức setTimeout và setInterval
Hai hàm cơ bản liên quan đến thiết lập bộ định thời là setTimeout() và setInterval(). Chúng nhận vào hai đối số: hàm được gọi và khoảng thời gian. Với setTimeout(), hàm đối số được gọi khi bộ định thời hết hạn. Với setInterval(), hàm đối số được gọi mỗi khi khoảng thời gian hẹn giờ trôi qua. Các hàm trả về một định danh mà bạn có thể sử dụng để xóa hoặc ngừng bộ định thời với hàm clearTimeout() và clearInterval(). Các hàm liên quan đến bộ định thời hoạt động theo mili giây chứ không phải giây. Đó là điều cần nhớ khi sử dụng các hàm này. Không có gì tệ hơn việc thiết lập khoảng thời gian là 1 với hy vọng nó sẽ thực thi mỗi giây, chỉ để nhận ra nó sẽ thực thi 1000 lần một giây.
setTimeout
Cấu trúc:
window.setTimeout(function, milliseconds)
Ví dụ:
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>setTimeout-setInterval</title>
</head>
<body>
<button>Click</button>
<button>Clear</button>
<script type="text/javascript">
var x = document.getElementsByTagName('button');
var y = x[0].onclick = function(){
setTimeout(ham,2000);
}
console.log(y);
function ham(){
alert('hello');
}
x[1].onclick = function(){
clearTimeout(y);
}
</script>
</body>
</html>Sau khi click vào button click đợi 2 giây thì hiện thông báo ”hello”, trong thời gian 2s nếu bạn click vào button Clear thì ngừng xử lý.
setTimeInterval
Cấu trúc:
window.setInterval(function, milliseconds)
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>setTimeout-setInterval</title>
</head>
<body>
<button>Click</button>
<button>Clear</button>
<script type="text/javascript">
var x = document.getElementsByTagName('button');
var y = x[0].onclick = function(){
setInterval(ham,1000);
}
console.log(y);
function ham(){
alert('hello');
}
x[1].onclick = function(){
clearInterval(y);
}
</script>
</body>
</html>Sau khi click vào button click đợi 1 giây thì hiện thông báo ”hello” cứ lặp lại liên tục như vậy, trong thời gian 1s nếu bạn click vào button Clear thì ngừng xử lý.
Okê xong nhé :D, vậy là chúng ta đã hiệu được nguyên tắc hoạt động và cách sử dụng phương thức setTimeout và setInterval rồi đúng không. Với lượng kiến thức này chúng ta có thể xử lý font end với javascript được rồi. Các bạn có thể làm những bài tập về javascript tại đây.
Để lại một bình luận