Tiếp tục khoảng thời gian javascript

JavaScript có một vài phương thức tiện dụng của đối tượng

setTimeout ( expression, timeout );

2.

0 và

1. Chúng cho phép bạn chạy một đoạn mã JavaScript vào một thời điểm nào đó trong tương lai. Trong hướng dẫn này, chúng tôi sẽ giải thích cách hoạt động của hai phương pháp này và đưa ra một số ví dụ thực tế

0

3 cho phép bạn chỉ định rằng một đoạn mã JavaScript (được gọi là biểu thức) sẽ được chạy trong một số mili giây đã chỉ định kể từ khi phương thức

0 được gọi. Cú pháp chung của phương thức là

setTimeout ( expression, timeout );

trong đó

5 là mã JavaScript để chạy sau khi

6 mili giây trôi qua

0 cũng trả về ID thời gian chờ dạng số có thể được sử dụng để theo dõi thời gian chờ. Điều này được sử dụng phổ biến nhất với phương pháp

8 (xem bên dưới)

Đây là một ví dụ đơn giản

Khi khách truy cập nhấp vào nút, phương thức

0 được gọi, chuyển vào biểu thức mà chúng tôi muốn chạy sau thời gian trễ và giá trị của chính thời gian trễ đó – 5.000 mili giây hoặc 5 giây

Hãy tự mình thử. Nhấn vào nút bên dưới và đợi 5 giây

Cần chỉ ra rằng

0 không dừng việc thực thi tập lệnh trong khoảng thời gian chờ; . Sau khi gọi đến

0, tập lệnh vẫn tiếp tục bình thường, với bộ đếm thời gian đang chạy ở chế độ nền

Trong ví dụ đơn giản ở trên, chúng tôi đã nhúng toàn bộ mã cho hộp cảnh báo JavaScript của mình vào lệnh gọi

0. Thông thường hơn, bạn sẽ gọi một hàm để thay thế. Trong ví dụ tiếp theo này, việc nhấp vào một nút sẽ gọi một hàm thay đổi màu văn bản của nút thành màu đỏ. Đồng thời, chức năng này cũng thiết lập chức năng hẹn giờ bằng cách sử dụng

0 để đặt màu văn bản trở lại màu đen sau 2 giây

6

Nhấp vào nút bên dưới để xem nó hoạt động

8

Đôi khi, thật hữu ích khi có thể hủy hẹn giờ trước khi nó tắt. Phương pháp

8 cho phép chúng tôi làm chính xác điều đó. Cú pháp của nó là

9

trong đó

66 là ID của thời gian chờ được trả về từ lệnh gọi phương thức

0

Ví dụ: đoạn mã sau thiết lập hộp cảnh báo xuất hiện sau 3 giây khi nhấp vào nút, nhưng khách truy cập có thể nhấp vào nút tương tự trước khi cảnh báo xuất hiện và hủy bỏ thời gian chờ

2

dùng thử. Nhấp vào nút bên dưới để bắt đầu hẹn giờ và nhấp lại vào nút đó trong vòng 3 giây để hủy bỏ

1

Hàm

69 có liên quan rất chặt chẽ với hàm

0 – chúng thậm chí có chung cú pháp

6

Sự khác biệt quan trọng là, trong khi

0 chỉ kích hoạt

5 một lần, thì

1 tiếp tục kích hoạt

5 nhiều lần (trừ khi bạn bảo nó dừng lại)

Vì vậy, khi nào bạn nên sử dụng nó?

1

… thì có lẽ bạn nên sử dụng

1 để thay thế

3

Tại sao? . Ngoài ra, khi sử dụng

1, hầu như không có độ trễ giữa một lần kích hoạt biểu thức và lần kích hoạt tiếp theo. Với

0, có độ trễ tương đối dài trong khi biểu thức được đánh giá, hàm được gọi và thiết lập

0 mới. Vì vậy, nếu bạn cần định thời gian chính xác, đều đặn – hoặc bạn cần làm điều gì đó với khoảng thời gian định sẵn – thì

1 là lựa chọn tốt nhất dành cho bạn

21

Như bạn có thể đoán, nếu bạn muốn hủy một

1 thì bạn cần gọi cho

21, chuyển ID khoảng thời gian được trả về bởi lệnh gọi tới

1

Đây là một ví dụ đơn giản về hoạt động của

1 và

21. Khi bạn nhấn một nút, đoạn mã sau sẽ hiển thị “Woo. ” và “Yay. ” ngẫu nhiên mỗi giây cho đến khi bạn bảo nó dừng lại. (mình nói ví dụ đơn giản thôi, ko hữu dụng. ) Lưu ý cách chúng tôi cũng đã sử dụng một

0 trong hàm

28 để thực hiện “Woo. ” hoặc “Yay. ” biến mất sau nửa giây

7

Và đây là hành động. Nhấp vào nút bên dưới để bắt đầu

Bản tóm tắt

Bây giờ chúng tôi đã đề cập đến bốn phương pháp mà bạn có thể sử dụng để tạo các sự kiện theo thời gian trong JavaScript.

0 và

8 để kiểm soát các sự kiện một lần và

1 và

21 để thiết lập các sự kiện lặp lại. Được trang bị những công cụ này, bạn sẽ không gặp vấn đề gì khi tạo sự kiện theo thời gian trong tập lệnh của riêng mình