Sử dụng bộ hẹn giờ, bạn có thể trì hoãn việc thực thi mã để mã không được thực hiện vào đúng thời điểm một sự kiện được kích hoạt hoặc trang được tải. Ví dụ: bạn có thể sử dụng bộ hẹn giờ để thay đổi biểu ngữ quảng cáo trên trang web của mình theo định kỳ hoặc hiển thị đồng hồ thời gian thực, v.v. Có hai chức năng hẹn giờ trong JavaScript. setTimeout() và setInterval()
Phần sau đây sẽ hướng dẫn bạn cách tạo bộ đếm thời gian để trì hoãn việc thực thi mã cũng như cách thực hiện một hoặc nhiều hành động lặp đi lặp lại bằng cách sử dụng các hàm này trong JavaScript
Thực thi mã sau một thời gian trễ
Hàm setTimeout() được sử dụng để thực thi một hàm hoặc đoạn mã được chỉ định một lần sau một khoảng thời gian nhất định. Cú pháp cơ bản của nó là setTimeout(function, milliseconds)
Hàm này chấp nhận hai tham số. một chức năng, là chức năng để thực thi và một tham số độ trễ tùy chọn, là số mili giây biểu thị lượng thời gian chờ trước khi thực thi chức năng (1 giây = 1000 mili giây). Hãy xem nó hoạt động như thế nào
Click Me
Ví dụ trên sẽ hiển thị thông báo cảnh báo sau 2 giây khi nhấp vào nút
Ghi chú. Nếu tham số độ trễ bị bỏ qua hoặc không được chỉ định, giá trị của 0 được sử dụng, điều đó có nghĩa là chức năng được chỉ định sẽ được thực thi "ngay lập tức" hoặc, ngay khi có thể
Thực thi mã theo định kỳ
Tương tự, bạn có thể sử dụng hàm setInterval() để thực thi lặp lại một hàm hoặc đoạn mã được chỉ định trong các khoảng thời gian cố định. Cú pháp cơ bản của nó là
The current time on your computer is:
0Hàm này cũng chấp nhận hai tham số. một hàm, là hàm để thực thi và khoảng thời gian, là số mili giây biểu thị lượng thời gian chờ đợi trước khi thực thi hàm (1 giây = 1000 mili giây). Đây là một ví dụ
The current time on your computer is:
Ví dụ trên sẽ thực thi hàm
The current time on your computer is:
1 lặp đi lặp lại sau 1 giây. Chức năng này lấy thời gian hiện tại trên máy tính của bạn và hiển thị nó trên trình duyệtDừng thực thi mã hoặc hủy hẹn giờ
Cả hai phương thức setTimeout() và setInterval() đều trả về một ID duy nhất (một giá trị nguyên dương, được gọi là mã định danh bộ đếm thời gian) xác định bộ đếm thời gian được tạo bởi các phương thức này
ID này có thể được sử dụng để tắt hoặc xóa bộ hẹn giờ và dừng thực thi mã trước đó. Xóa bộ hẹn giờ có thể được thực hiện bằng hai chức năng.
The current time on your computer is:
4 vàThe current time on your computer is:
5Hàm setTimeout() nhận một tham số duy nhất, một ID và xóa bộ đếm thời gian setTimeout() được liên kết với ID đó, như minh họa trong ví dụ sau
Show Alert After Two Seconds Cancel Alert Before It Display
Tương tự, phương pháp
The current time on your computer is:
5 được sử dụng để xóa hoặc vô hiệu hóa bộ hẹn giờ setInterval()________số 8_______
Ghi chú. Về mặt kỹ thuật, bạn có thể sử dụng
The current time on your computer is:
4 vàThe current time on your computer is:
5 thay thế cho nhau. Tuy nhiên, để rõ ràng và bảo trì mã, bạn nên tránh làm như vậyTrong JavaScript, bộ đếm thời gian được tạo để thực thi một tác vụ hoặc bất kỳ chức năng nào tại một thời điểm cụ thể. Về cơ bản, bộ đếm thời gian được sử dụng để trì hoãn việc thực thi chương trình hoặc thực thi mã JavaScript trong một khoảng thời gian thông thường. Với sự trợ giúp của bộ đếm thời gian, chúng ta có thể trì hoãn việc thực thi mã. Vì vậy, mã không hoàn thành quá trình thực thi cùng lúc khi một sự kiện kích hoạt hoặc tải trang
Ví dụ tốt nhất về bộ đếm thời gian là các biểu ngữ quảng cáo trên các trang web, thay đổi sau mỗi 2-3 giây. Các biểu ngữ quảng cáo này được thay đổi định kỳ trên các trang web như Amazon. Chúng tôi đặt khoảng thời gian để thay đổi chúng. Trong chương này, chúng tôi sẽ chỉ cho bạn cách tạo bộ hẹn giờ
JavaScript cung cấp hai hàm hẹn giờ setInterval() và setTimeout(), giúp trì hoãn việc thực thi mã và cũng cho phép thực hiện lặp đi lặp lại một hoặc nhiều thao tác. Chúng tôi sẽ thảo luận chi tiết về cả hai chức năng hẹn giờ cũng như các ví dụ của chúng
ví dụ
Dưới đây là một số ví dụ về bộ đếm thời gian JavaScript sử dụng các chức năng này
setTimeout()
Hàm setTimeout() giúp người dùng trì hoãn việc thực thi mã. Phương thức setTimeout() chấp nhận hai tham số trong đó một là hàm do người dùng định nghĩa và một tham số khác là tham số thời gian để trì hoãn thực thi. Tham số thời gian giữ thời gian tính bằng mili giây (1 giây = 1000 mili giây), là tùy chọn để vượt qua
Cú pháp cơ bản của setTimeout() là
Chúng ta sẽ sử dụng hàm setTimeout() để trì hoãn việc in tin nhắn trong 3 giây. Thông báo sẽ hiển thị trên web sau 3 giây thực thi mã chứ không phải ngay lập tức. Bây giờ, hãy xem đoạn mã dưới đây để xem nó hoạt động như thế nào
Thực thi mã sau một thời gian trễ
Kiểm tra nó ngay bây giờđầu ra
Đoạn mã trên sẽ thực thi trong hai phần. Đầu tiên, phần HTML của mã sẽ thực thi, trong đó bằng cách nhấp vào nút Bấm vào đây, mã JavaScript còn lại sẽ thực thi sau 3 giây. Xem đầu ra bên dưới
Khi nhấp vào nút Click Here, đoạn mã còn lại sẽ thực thi sau 3 giây. Thông báo Chào mừng bạn đến với javaTpoint sẽ hiển thị trên web sau 3 giây (3000 mili giây)
setInterval()
Phương thức setInterval hơi giống với hàm setTimeout(). Nó thực thi chức năng được chỉ định lặp đi lặp lại sau một khoảng thời gian. Hoặc chúng ta có thể nói đơn giản rằng một chức năng được thực thi lặp đi lặp lại sau một khoảng thời gian cụ thể do người dùng cung cấp trong chức năng này. Ví dụ - Hiển thị thời gian cập nhật cứ sau năm giây
Cú pháp cơ bản của setInterval() là
Tương tự như phương thức setTimeout(), nó cũng nhận 2 tham số trong đó một tham số là hàm do người dùng định nghĩa và tham số kia là tham số khoảng thời gian chờ trước khi thực thi hàm. Tham số khoảng thời gian chứa lượng thời gian tính bằng mili giây (1 giây = 1000 mili giây), là tùy chọn để vượt qua. Bây giờ, hãy xem mã bên dưới cách thức hoạt động của chức năng này
Thực thi mã theo một khoảng thời gian đều đặn
Kiểm tra nó ngay bây giờđầu ra
Khi thực thi đoạn mã trên, phản hồi sẽ là một câu lệnh HTML đơn giản mà không có bất kỳ chuỗi thời gian nào như đầu ra bên dưới
Sau 4 giây, hàm JavaScript sẽ gọi và bắt đầu hiển thị thời gian. Điều này sẽ liên tục hiển thị thời gian hệ thống của bạn cứ sau bốn giây
Ví dụ
Thêm một ví dụ về phương thức setInterval() để hiển thị chuỗi thông báo sau mỗi 4 giây liên tục
Kiểm tra nó ngay bây giờđầu ra
Khi thực thi đoạn mã trên, một thông báo có nút sẽ hiển thị trên trình duyệt. Nhấp vào nút này để xử lý thêm và xem điều gì xảy ra tiếp theo
Bằng cách nhấp vào nút Nhấp vào đây này, hàm waitAndshow() sẽ bắt đầu in thông báo Chào mừng bạn đến với Javatpoint lặp đi lặp lại trên web sau mỗi 4 giây
Bạn đã xem cách tạo bộ đếm thời gian hoặc đặt khoảng thời gian. Đôi khi, chúng tôi cần hủy các bộ hẹn giờ này. JavaScript cung cấp hàm dựng sẵn để xóa bộ đếm thời gian, như sau
Hủy bỏ hoặc Dừng hẹn giờ
JavaScript cung cấp hai chức năng clearTimeout() và clearInterval() để hủy hoặc dừng bộ đếm thời gian và tạm dừng thực thi mã. Cả setTimeout() và setInterval() đều trả về một ID duy nhất. Các ID này được sử dụng bởi ClearTimeout() và ClearInterval() để xóa bộ đếm thời gian và dừng thực thi mã trước đó. Cả hai đều chỉ lấy một tham số, tôi. e. , NHẬN DẠNG
Ví dụ
Trong ví dụ này, chúng ta sẽ sử dụng ClearTimeout() để xóa bộ đếm thời gian được đặt bằng hàm setTimeout(). Xem ví dụ về cách ClearInterval() hoạt động với setInterval()
Vô hiệu hóa khoảng thời gian thường xuyên
Kiểm tra nó ngay bây giờđầu ra
Bằng cách thực thi đoạn mã trên, thời gian hệ thống hiện tại sẽ bắt đầu hiển thị trên web với khoảng thời gian đều đặn là 3 giây. Trang này cũng có một nút để tắt bộ đếm thời gian này
Đồng hồ bấm giờ sẽ hiển thị thời gian cập nhật sau mỗi ba giây. Nếu bạn nhấp vào nút Dừng đồng hồ này, bộ đếm thời gian sẽ bị tắt và ngừng hiển thị thời gian đã cập nhật