Tìm hiểu setTimeout và setInterval trong JavaScript

1587

Người viết: Trần Hằng

JavaScript Scheduling: setTimeout and setInterval

Giới thiệu chung

Mộ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 ý.

  • setTimeout()
  • setInterval()

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 hành động của hai method này như thế nào qua các ví dụ 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 sayHello sẽ được thực thi sau 1s. Bạn cũng có thể truyền các đối số cùng với hàm như ví dụ dưới đây:

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: myVar = setTimeout(function, milliseconds); để thấy hoạt động của nó rõ hơn, chúng ta xem xét ví dụ sau:

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.

Có thể bạn quan tâm

Học ngay Javascript đi vì nó vẫn sẽ là ngôn ngữ phổ biến nhất 2019

12 Thư viện JavaScript trực quan hoá dữ liệu hot nhất năm 2019

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 setInterval(). Tiếp theo chúng ta sẽ đi tìm hiểu kỹ hơn về cách sử dụng của nó.

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à: setTimeout chỉ kích hoạt expression một lần trong khi setInterval sẽ kích hoạt expression sau một khoảng thời gian nhất định (trừ khi bạn cho nó dừng lại).

Để dừng hoạt động của hàm setInterval, chúng ta sử dụng hàm clearInterval(timerId). Xem ví dụ dưới đây:

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().

Techtalk via Viblo