1. BOM Time Events trong JavaScript là gì?

BOM Time Events trong Js ta có thể hiểu nôm na nó là một bộ hẹn giờ. Nó cung cấp chức năng để trì hoãn một hành động trong một thời gian nhất định. Hoặc thực hiện một hành động liên tục sau một khoảng thời gian đều đặn. Số lần thực hiện có thể được lặp đi lặp lại hoặc không.

Hai phương thức chính được sử dụng với Js là:

setTimeout(function, milliseconds) : Thực thi một chức năng, sau khi đợi một số mili giây được chỉ định.
setInterval(function, milliseconds) : Tương tự như setTimeout() , nhưng lặp lại việc thực thi hàm liên tục.

Cả setTimeout() và setInterval() đều là các phương thức của đối tượng HTML DOM Window .

2. Phương thức setTimeout() trong JavaScript

Phương thức setTimeout() thực thi một hành động sau một khoảng thời gian nhất định. Nó sẽ chỉ thực hiện một lần duy nhất mà không lặp lại.

Cú pháp : setTimeout(function, time)

Trong đó:

function : là nội dung cần thực hiện, đây thường là một hàm
time : là khoảng thời gian bao nhiêu (tính bằng mili giây) thì function đó sẽ thực hiện

Ví dụ: Chờ 2s để hiện ra thông báo

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>Ấn vào Click chờ 2 giây và trang sẽ thông báo</p>

<button onclick="setTimeout(myFunction, 2000);">Click</button>

<script>
function myFunction() {
  alert('Lập Trình Từ Đầu');
}
</script>

</body>
</html>

3. Phương thức clearTimeout() trong JavaScript

Phương thức này sẽ giúp ta dừng việc thực hiện hàm setTimeout() . Phương thức này là một phương thức của đối tượng window nên ta không cần tham chiếu nó đến window . Tham số truyền vào hàm clearTimeout() là đối tượng setTimeout() nên lúc này ban phải đặt hàm setTimeout() vào một biến cụ thể.

Cú pháp : clearTimeout(timeout);

Trong đó timeout là biến mà hàm setTimeout() được gán.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>Chọn Click chờ 5 giây trang sẽ cảnh báo</p>
<p>chọn Stop để ngăn hành động hiển thị</p>
<p>Phải chọn stop trước khi hết 5s</p>

<button onclick="myVar = setTimeout(myFunction, 5000)">Click</button>

<button onclick="clearTimeout(myVar)">Stop</button>

<script>
function myFunction() {
  alert("Lập Trình Từ Đầu");
}
</script>
</body>
</html>

4. Phương thức setInterval() trong JavaScript

Phương thức setInterval() cũng sẽ thực thi một hành động trong một thời gian cho trước. Nhưng số lần thực hiện của nó sẽ được lặp lại. Tức là sau khi thực hiện xong lần 1 nó sẽ thực hiện tiếp lần 2, lần 3,… Và sẽ không bao giờ dừng.

Cú pháp : setInterval(function, milliseconds);

Trong đó:

function : là hàm thực thi hành động.
milliseconds : là thời gian sau bao nhiêu mili giây thì thực hiện function .

Ví dụ: ta có thể tạo một đồng hồ theo phương thức setInterval()

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>Một đoạn mã trên trang này bắt đầu đồng hồ này:</p>

<p id="demo"></p>

<script>
setInterval(myTimer, 1000);

function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

</body>
</html>

5. Phương thức clearInterval() trong JavaScript

Nếu bạn không ngăn phương thức setInterval() gọi hàm thì nó sẽ tiếp tục thực thi hàm cho đến vô cùng. Vì vậy, chúng ta cần phải dừng nó lại. Ta sẽ sử dụng clearIterval() để làm điều này. Và ta cũng phải đặt setInterval() trong một biến thì mới dừng được.

Cú pháp : clearInterval(interval);

Trong đố interval là tên biến chứa hàm setIntervar() mà ta muốn dừng.