Sự kiện thời gian trong JavaScript

Mã JavaScript có thể được thực hiện trong khoảng thời gian nào đó. Đây được gọi là sự kiện thời gian.

Sự kiện thời gian

Đối tượng window cho phép thực thi mã theo các khoảng thời gian nhất định. Các khoảng thời gian này được gọi là sự kiện thời gian. Hai phương thức chính để sử dụng với JavaScript là:

• setTimeout (hàm, mili giây): thực hiện một hàm, sau khi chờ một số mili giây quy định.
• setInterval (hàm, mili giây): tương tự như setTimeout(), nhưng lặp lại liên tục việc thực hiện các hàm.

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

Phương thức setTimeout()

window.setTimeout(function, milliseconds);

Phương thức window.setTimeout() có thể được viết mà không có tiền tố window. Tham số đầu tiên là một hàm được thực hiện. Tham số thứ hai cho biết số mili giây trước khi thực hiện.

Ví dụ nhấp vào một nút, đợi 3 giây và trang sẽ cảnh báo “Hello”:

<button onclick="setTimeout(myFunction, 3000)">Try it</button>

<script>
function myFunction() {
    alert('Hello');
}
</script>

Cách dừng thực hiện hàm

Phương thức clearTimeout() dừng việc thực hiện hàm được xác định trong setTimeout().

window.clearTimeout(timeoutVariable)

Phương thức window.clearTimeout() có thể được viết mà không có tiền tố window. Phương thức clearTimeout() sử dụng biến trả về từ setTimeout():

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

Nếu hàm chưa được thực thi, bạn có thể dừng thực hiện bằng cách gọi phương thức clearTimeout(). Tương tự ví dụ ở trên, nhưng ở đâu thêm một nút “Stop”:

<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>

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

Phương thức setInterval()

Phương thức setInterval() lặp lại một hàm đã cho tại mỗi khoảng thời gian nhất định. Cú pháp:

window.setInterval(function, milliseconds);

Phương thức window.setInterval() có thể được viết mà không có tiền tố window.

Tham số đầu tiên là hàm được thực hiện. Tham số thứ hai chỉ ra độ dài của khoảng thời gian giữa mỗi lần thực hiện. Ví dụ dưới thực hiện một hàm gọi là “myTimer” một lần mỗi giây (như một chiếc đồng hồ kỹ thuật số).

Ví dụ hiển thị thời gian hiện tại:

var myVar = setInterval(myTimer, 1000);

function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

Một giây tương đương với 1000 mili giây.

Cách dừng thực hiện hàm

Phương thức clearInterval() dừng việc thực hiện hàm được xác định trong phương thức setInterval().

window.clearInterval(timerVariable)

Phương thức window.clearInterval() có thể được viết mà không có tiền tố window. Phương thức clearInterval() sử dụng biến trả về từ setInterval():

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

Tương tự ví dụ trên nhưng thêm nút “Stop time”:

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

<button onclick="clearInterval(myVar)">Stop time</button>

<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>