Hướng dẫn dùng timewindow JavaScript
JavaScript Scheduling: setTimeout and setIntervalGiới thiệu chungMột block mã Javascript thường được thực thi đồng bộ. Tuy nhiên có một số hàm Javascript (timers) cho phép chúng ta trì hoãn việc thực thi của các hướng dẫn tùy ý.
Hai hàm này cho phép bạn thực hiện một đoạn mã Javascript tại một thời điểm nào đó trong tương lai. Nó được gọi là "lập lịch một cuộc gọi" (scheduling a call). Trong bài viết này, chúng ta sẽ tìm hiểu động của hai method này như thế nào qua các ví du minh họa. setTimeout()Hàm setTimeout() thường được sử dụng nếu bạn muốn hàm của mình thực thi bao nhiêu mili giây kể từ khi gọi method setTimeout(). Cú pháp chung của method này như sau:
Trong đó, expression là đoạn mã JavaScript được thực thi sau khi timeout chạy hết số mili giây đã thiết lập. Để theo dõi thời gian chờ, setTimeout() cũng trả về một số id của timeout. Điều này thường được sử dụng trong method clearTimeout(). Một ví dụ đơn giản cho method này:
Khi bạn click button "Wait for my Hello", method setTimeout sẽ được gọi. Biểu thức mà bạn muốn thực hiện sẽ được thực thi sau 4000 mili giây hay là 4 giây. Điểm lưu ý ở đây là setTimeout() sẽ không dừng việc thực thi các lệnh tiếp theo trong thời gian chờ. Nó chỉ lập lịch cho đoạn mã JavaScript được chỉ định sẽ thực thi vào thời điểm được thiết lập trước đó. Sau khi gọi hàm setTimeout(), các lệnh tiếp tục chạy bình thường với timer chạy ở chế độ nền. Ví dụ trên là ví dụ đơn giản thực hiện hộp thoại alert trong method setTimeout. Thay vì việc sử dụng câu lệnh được viết ngay trong setTimeout chúng ta sẽ sử dụng bằng cách gọi đến một hàm. Ví dụ tiếp theo sẽ đưa ra cho bạn ý tưởng tốt hơn về gọi hàm với setTimeout(). Xem xét ví dụ sau đây:
Hàm
Nếu đối số đầu tiên của setTimeout() là 1 string, JavaScript sẽ tạo một hàm từ nó. Do đó, nó cũng thực hiện như sau:
Tuy nhiên sử dụng string không được đề xuất sử dụng, sử dụng hàm thay thế chúng câu lệnh trên sẽ sửa lại như sau:
Để dừng hàm này, ta sử dụng:
với myVar được khai báo:
Khi click button "Try it" sau 3s sẽ xuất hiện hộp thoại "Hello" tuy nhiên nếu trong khoảng 3s lại click button "Stop it" hộp thoại sẽ không xuất hiện. setInterval()Xem xét ví dụ sau:
Với đoạn mã JavaScript trên cứ sau 5s sẽ xuất hiện hộp thoại hiển thị thông báo "Hello world!". Trên đây là ví dụ đơn giản về sử dụng hàm Hàm setInterval() như cái tên của nó, hàm này sẽ thường được sử dụng để thiết lập độ trễ cho các hàm sẽ được thực hiện lặp lại như là hiệu ứng. Hàm setInterval() có quan hệ gần gũi với setTimeout() - cú pháp của 2 hàm cũng có vẻ giống nhau:
Điểm khác duy nhất giữa chúng là: Để dừng hoạt động của hàm
Một câu hỏi đặt ra là chúng ta nên sử dụng setInterval() khi nào? Trước tiên, bạn không cần phải ghi nhớ để gọi hàm setTimeout() tại cuối mỗi hàm hẹn giờ của bạn. Ngoài ra, khi sử dụng setInterval() sẽ không có độ trễ giữa 2 lần gọi hàm liên tiếp. Với setTimeout(), độ trễ tương đối dài trong khi biểu thức được ước tính, hàm được gọi, và setTimeout() mới bắt đầu được thiết lập. Vì vậy, nếu thời gian cần chính xác, thường xuyên hoặc một cái gì đó cần phải được thực hiện lặp lại sau những khoảng thời gian nhất định thì bạn nên sử dụng setInterval(). Nguồn tham khảo: https://medium.com/@monica1109/scheduling-settimeout-and-setinterval-ca2ee50cd99f?fbclid=IwAR3QqRkcl37_yeEqLFNp7Kjv8-J5aeRDAsZC6A3OK3OO4ynyMvWHm8icA7s https://www.w3schools.com/js/js_timing.asp |