Làm cách nào tôi có thể đặt hẹn giờ trong JavaScript?

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: 

Hà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: 

Dừ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: 

 
The current time on your computer is: 

Hà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: 

________số 8_______

Ghi chú. Về mặt kỹ thuật, bạn có thể sử dụng

 
The current time on your computer is: 

 
The current time on your computer is: 

Trong 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ễ

đầ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

đầ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

đầ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

đầ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

Làm cách nào để đặt hẹn giờ 2 phút trong JavaScript?

Có bộ đếm thời gian trong JavaScript không?

Làm cách nào để đặt hẹn giờ trong 1 giây trong JavaScript?

Làm cách nào để đặt hẹn giờ trong 30 phút trong JavaScript?