Sự kiện thời gian JavaScript
1 2 3 4 5 6 7 số 8 9 10 11 12 | JavaScript có thể được thực thi theo khoảng thời gian. Điều nà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ã ở những 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.
Hai phương pháp chính để sử dụng với JavaScript là:
-
setTimeout( function, milliseconds
)
Thực thi một hàm sau khi chờ 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 một cách liên tục.
setTimeout()
và setInterval()
đều là các phương thức của đối tượng HTML DOM 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ần tiền tố cửa sổ.
Tham số đầu tiên là một hàm sẽ được thực thi.
Tham số thứ hai cho biết số mili giây trước khi thực hiện.
Ví dụ
Bấm vào một nút. Đợi 3 giây, trang sẽ thông báo "Xin chào":
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
Hãy tự mình thử » Làm thế nào để dừng việc thực thi?
Phương thức clearTimeout()
dừng việc thực thi hàm được chỉ định trong setTimeout().
window.clearTimeout( timeoutVariable )
Phương thức window.clearTimeout()
có thể được viết mà không cần tiền tố cửa sổ.
Phương thức clearTimeout()
sử dụng biến được 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 việc thực thi bằng cách gọi phương thức clearTimeout()
:
Ví dụ
Ví dụ tương tự như trên nhưng có thêm nút "Dừng":
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
Hãy tự mình thử »Phương thức setInterval()
Phương thức setInterval()
lặp lại một hàm nhất định tại mỗi khoảng thời gian nhất định.
window.setInterval( function , milliseconds );
Phương thức window.setInterval()
có thể được viết mà không cần tiền tố cửa sổ.
Tham số đầu tiên là hàm sẽ được thực thi.
Tham số thứ hai cho biết khoảng thời gian giữa mỗi lần thực hiện.
Ví dụ này thực thi một hàm có tên "myTimer" mỗi giây một lần (như đồng hồ kỹ thuật số).
Ví dụ
Hiển thị thời gian hiện tại:
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
Hãy tự mình thử »Có 1000 mili giây trong một giây.
Làm thế nào để dừng việc thực thi?
Phương thức clearInterval()
dừng việc thực thi hàm được chỉ đị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ần tiền tố cửa sổ.
Phương thức clearInterval()
sử dụng biến được trả về từ setInterval()
:
let myVar = setInterval( function , milliseconds );
clearInterval(myVar);
Ví dụ
Ví dụ tương tự như trên, nhưng chúng tôi đã thêm nút "Dừng thời gian":
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
let myVar = setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
Hãy tự mình thử »Thêm ví dụ
Một cách tính thời gian đơn giản khác
Đồng hồ được tạo bằng sự kiện tính giờ