JavaScript sự kiện thời gian

JavaScript có thể thực hiện trong khoảng thời gian.

Đây là điều được gọi là sự kiện định thời (Timing Events).

Sự kiện thời gian

Đối tượng window cho phép thực hiện mã với khoảng thời gian được chỉ định.

Những khoảng thời gian này được gọi là sự kiện thời gian.

phương pháp quan trọng được sử dụng bằng JavaScript có hai phương pháp chính:

setTimeout(function, milliseconds)
thực hiện hàm sau khi chờ số mili giây được chỉ định.
setInterval(function, milliseconds)
tương đương với setTimeout() nhưng lặp lại thực hiện hàm đó.

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

phương pháp setTimeout()

window.setTimeout(function, milliseconds);

window.setTimeout() phương pháp có thể không có window viết với tiền tố.

Tham số đầu tiên là hàm cần thực hiện.

Tham số thứ hai chỉ định số mili giây trước khi thực hiện.

Ví dụ

Nhấp vào nút. Chờ 3 giây, sau đó trang web sẽ hiển thị "Hello":

<button onclick="setTimeout(myFunction, 3000)">Thử một lần</button>
<script>
function myFunction() {
    alert('Hello');
 }
</script>

Thử ngay

Làm thế nào để dừng thực hiện?

clearTimeout() phương pháp dừng lại thực hiện setTimeout() hàm được quy định.

window.clearTimeout(timeoutVariable)

window.clearTimeout() phương pháp có thể không có window viết với tiền tố.

clearTimeout() sử dụng từ setTimeout() Biến trả về:

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

Ví dụ

Tương tự như ví dụ trên nhưng thêm nút "dừng":

<button onclick="myVar = setTimeout(myFunction, 3000)">Thử một lần</button>
<button onclick="clearTimeout(myVar)">Dừng thực hiện</button>

Thử ngay

phương pháp setInterval()

setInterval() phương pháp lặp lại hàm được cung cấp sau mỗi khoảng thời gian được chỉ định.

window.setInterval(function, milliseconds);

window.setInterval() phương pháp có thể không có window viết với tiền tố.

Tham số đầu tiên là hàm cần thực hiện.

Tham số thứ hai là độ dài thời gian giữa mỗi lần thực hiện.

Ví dụ này thực hiện hàm "myTimer" mỗi giây một lần (như đồng hồ 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();
}

Thử ngay

Một giây có 1000 mili giây.

Làm thế nào để dừng thực hiện?

clearInterval() phương pháp dừng lại setInterval() thực hiện hàm được chỉ định trong phương pháp.

window.clearInterval(timerVariable)

window.clearInterval() phương pháp có thể viết không cần tiền tố window.

clearInterval() Phương pháp sử dụng từ setInterval() Biến trả về:

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

Ví dụ

Giống như ví dụ trên, nhưng chúng ta thêm một nút "Dừng thời gian":

<p id="demo"></p>
<button onclick="clearInterval(myVar)">Dừng thời gian</button>
<script>
var myVar = setInterval(myTimer, 1000);
 function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

Thử ngay