setInterval trong JavaScript và cách hẹn giờ chạy xử lý nhiều lần | Laptrinhcanban.com

setInterval trong JavaScript và cách hẹn giờ chạy xử lý nhiều lần

Hướng dẫn cách sử dụng setInterval và clearInterval trong JavaScript. Bạn sẽ biết cách sử dụng phương thức setInterval để hẹn giờ chạy lặp lại một xử lý sau mỗi khoảng thời gian chỉ định, cũng như cách huỷ hẹn giờ đã định bằng phương thức clearInterval trong JavaScript trong bài học này.

Phương thức setInterval trong JavaScript có tác dụng hẹn giờ chạy lặp đi lặp lại một xử lý nhiều lần. Để hẹn giờ chạy 1 lần duy nhất, hãy sử dụng phương thức setTimeout để thay thế.

window.setInterval trong JavaScript là gì

window.setInterval trong JavaScript là một phương thức của window Object, có tác dụng đặt bộ hẹn giờ để chạy lặp đi lặp lại một xử lý hoặc đoạn mã sau mỗi khoảng thời gian chỉ định.

Cú pháp hẹn giờ xử lý bằng phương thức window.setInterval như sau:

window.setInterval(function[, delaytime])

Trong đó:

  • function là xử lý hoặc đoạn mã cần hẹn giờ chạy. Chúng ta có thể chỉ định function bằng một hàm thông thường, hoặc là một đoạn mã, tuy nhiên vì lý do bảo mật nên cú pháp sử dụng đoạn mã không được khuyến nghị, và thông thường chúng ta sẽ sử dụng hàm đối với đối số này.
  • delay là thời gian tính bằng mili giây mà bộ hẹn giờ sẽ đợi trước khi thực thi chức năng hoặc mã được chỉ định. Đối số này có thể lược bỏ và khi đó nó sẽ có giá trị bằng 0, có nghĩa là sẽ thực thi ngay lập tức.

Giá trị trả về từ setInterval sẽ là một ID đại diện cho bộ hẹn giờ được đặt. Cũng bằng cách sử dụng ID này, chúng ta có thể cancel thời gian đã đặt, bằng cách sử dụng một phương window.clearInterval để cancel nó.

Ví dụ cụ thể, chúng ta hẹn giờ chạy xử lý dispMsg sau mỗi 3 giây ( bằng 3000 ms) trôi qua như sau:

window.setInterval(dispMsg, 3000);

function dispMsg(){
alert('3 seconds!');
}

Ngoài ra, chúng ta có thể dùng các hàm arrow hoặc hàm vô danh để khai báo trực tiếp xử lý trong phương thức như sau:

window.setInterval(function(){
alert('3 seconds!');
}, 3000);

Hẹn giờ chạy xử lý nhiều lần bằng setInterval

Sau đây hãy cùng xem ví dụ cơ bản về cách hẹn giờ xử lý chạy nhiều lần trong JavaScript bằng phương thức window.setInterval.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>Hẹn giờ xử lý</p>

<input type="button" value="click" id="btn">

<script>
let count = 3;
let btn = document.getElementById('btn');
btn.addEventListener('click', function(){
window.setInterval(function(){
console.log(count + ' giây trôi qua');
count += 3;
}, 3000);
});
</script>

</body>
</html>

Với mã HTML trên, sau khi click vào nút click thì cứ sau 3 giây, xử lý đếm sẽ được thực thi một lần và in ra kết quả tại màn hình console như sau:

window.setInterval trong JavaScript

Huỷ hẹn giờ xử lý đã đặt bằng phương thức clearInterval

Để huỷ hẹn giờ xử lý đã đặt bằng phương thức setInterval, chúng ta sử dụng phương thức clearInterval với cú pháp sau đây:

window.clearInterval(id)

Trong đó id là ID đại diện cho bộ hẹn giờ được đặt bởi phương thức setInterval mà Kiyoshi đã hướng dẫn ở phần trên.

Ví dụ cụ thể, chúng ta có thể huỷ đi một bộ hẹn giờ, trước khi nó được xử lý như sau:

let id = window.setInterval(function(){
alert('Hết giờ');
}, 2000);

window.clearInterval(id);

Trong đó id là ID đại diện cho bộ hẹn giờ được đặt bởi phương thức setInterval mà Kiyoshi đã hướng dẫn ở phần trên.

Ví dụ cụ thể, chúng ta có thể huỷ đi một bộ hẹn giờ, trước khi nó được xử lý như sau:

let id = window.setInterval(function(){
alert('Hết giờ');
}, 2000);

window.clearInterval(id);

Nếu trước khi hết thời gian đặt hẹn giờ xử lý bằng setInterval mà phương thức clearInterval được thực thi thì bộ hẹn giờ đó sẽ bị huỷ đi.

Sau đây hãy cùng xem mã mẫu về cách huỷ bộ hẹn giờ đặt bởi clearInterval như sau :

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>Huỷ hẹn giờ bằng clearInterval</p>

<input type="button" value="click" id="btnTimer">
<input type="button" value="cancel" id="btnCancel">

<script>
let timerid;

let btnTimer = document.getElementById('btnTimer');
btnTimer.addEventListener('click', function(){
timerid = window.setInterval(function(){
alert('Hết giờ');
}, 5000);
});

let btnCancel = document.getElementById('btnCancel');
btnCancel.addEventListener('click', function(){
window.clearInterval(timerid);
console.log('Hẹn giờ bị huỷ')
});
</script>

</body>
</html>

Với mã HTML trên, sau khi click vào nút click thì cứ sau 3 giây, xử lý đếm sẽ được thực thi một lần và in ra kết quả tại màn hình console như sau:

window.clearInterval trong JavaScript

Tuy nhiên sau đó nếu chúng ta click vào nút cancel thì bộ hẹn giờ trên sẽ bị huỷ đi như sau:

window.clearInterval trong JavaScript

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách hẹn giờ và huỷ hẹn giờ xử lý lặp đi lặp lại nhiều lần bằng phương thức setInterval và clearInterval trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.