Settimeout Javascript Là Gì

     

Trong bài hướng dẫn tự học Lập trình JavaScript này bạn sẽ được học về các bộ hẹn giờ(Timer functions)

*

Bộ hẹn giờ trong JavaScript

1. Bộ hẹn giờ là gì?

Bộ hẹn giờ (Timer) là một chức năng cho phép chúng ta thực hiện một chức năng tại một thời điểm cụ thể.

Bạn đang xem: Settimeout javascript là gì

Sử dụng bộ hẹn giờ, bạn có thể trì hoãn việc thực thi code để nó không hoàn thành vào đúng thời điểm một sự kiện được kích hoạt hoặc khi trang được tải.

Ví dụ: Bạn có thể sử dụng bộ hẹn giờ để thay đổi các biểu ngữ quảng cáo trên trang web của mình theo khoảng thời gian đều đặn hoặc hiển thị đồng hồ thời gian thực, v.v.

Có hai hàm hẹn giờ trong JavaScript: setTimeout()setInterval().

Phần tiếp sau đây sẽ hướng dẫn bạn cách tạo bộ hẹn giờ để trì hoãn việc thực thi codecũng như cách thực hiện lặp lại một hoặc nhiều hành động bằng cách sử dụng các hàm này trong JavaScript.

2. Thực thi code sau khi trì hoãn một thời gian với setTimout trong JavaScript

Hàm setTimeout() trong JavaScript được sử dụng để thực thi một hàm hoặc đoạn mã được chỉ định chỉ một lần sau một khoảng thời gian nhất định.

Cú pháp cơ bản của setTimeout là:

setTimeout(function, milliseconds)

Hàm này chấp nhận hai tham số:

+ Một hàm: Là hàm để thực thi

+ Một tham số tùy chọn để chỉ định độ trễ, là số mili giây thể hiện lượng thời gian chờ trước khi thực thi hàm (1 giây = 1000 mili giây).

Hãy xem cách nó hoạt động như thế nào qua ví dụ sau:

Click thử ngay!

Ví dụ trên sẽ hiển thị thông báo cảnh báo sau 3 giây khi click vào nút.

Lưu ý: Nếu tham số trễ bị bỏ qua hoặc không được chỉ định, giá trị 0 (mặc định) sẽ được sử dụng, điều đó có nghĩa là hàm đã chỉ định được thực thi "ngay lập tức" hoặc càng sớm càng tốt.

3. Thực thi code sau khoảng thời gian đều đặn với setInterval trong JavaScript

Tương tự, bạn có thể sử dụng hàm setInterval() để thực thi một hàm hoặc đoạn mã được chỉ định lặp đi lặp lại vào những khoảng thời gian cố định.

Cú pháp cơ bản của setInterval là:

setInterval(function, milliseconds)

Hàm này cũng chấp nhận hai tham số:

+ Một hàm, là hàm để thực thi

+ Khoảng thời gian, là số mili giây biểu thị lượng thời gian chờ trước khi thực thi hàm (1 giây = 1000 mili giây).

Xem thêm: Phần Mềm Theo Dõi Nhiệt Độ Cpu Trên Máy Tính Tốt Nhất

Đây là một ví dụ:

Thời gian hiện tại (tính theo máy tính của bạn là):

Ví dụ trên sẽ thực thi hàm showTime() lặp lại sau 1 giây.

Chức năng này sẽ lấy thời gian hiện tại trên máy tính của bạn và hiển thị trên trình duyệt.

4. Phương pháp dừng thực thi code hoặc hủy hẹn giờ

Cả hai phương thức setTimeout()setInterval() đều trả về một ID duy nhất (một giá trị nguyên dương, được gọi là timer identifier) xác định bộ hẹn giờ được tạo bởi các phương thức này.

Sau khi có ID này, bạn có thể được sử dụng để tắt hoặc xóa bộ đếm thời gian và dừng việc thực thi mã trước đó.

Xóa bộ đếm thời gian có thể được thực hiện bằng cách sử dụng hai hàm: clearTimeout()clearInterval().

Hãy xem ví dụ xóa việc thực thi hàm setTimout():

Hiển thị thông báo sau 3sXóa thực thi hàm setTimeout

Tương tự, phương thức clearInterval() được sử dụng để xóa hoặc vô hiệu hóa bộ hẹn giờ setInterval().

Thời gian hiện tại (tính theo máy tính của bạn là):

Tạm dừng

Lưu ý: Về mặt kỹ thuật, bạn có thể sử dụng thay thế clearTimeout() cho clearInterval(). Tuy nhiên, để đảm bảo tính rõ ràng và khả năng bảo trì, bạn nên tránh làm như vậy.

Như vậy là qua bài viết này, bạn đã biết cách sử dụng bộ hẹn giờ trong JavaScript thông qua hai phương thức setTimeout()setInterval().

Cũng đơn giản thôi phải không?

Nhưng chỉ với 2 phương thức này, bạn có thể tạo ra nhiều chương trình thú vị cho ứng dụng của mình đấy.

Note: Nếu bạn đang quan tâm đến lập trình web thì tham khảo ngayKHÓA HỌC LẬP TRÌNH WEB (Full Stack). Học trong 12 tháng - Học chắc tay - Hành nghề ngay!


Ý kiến học viên

Kiến thức học tại NIIT - ICT Hà Nội giúp mình có lợi thế rất lớn đối với công việc Marketing tại VTC Mobile mà hiện tại mình theo đuổi. Chúc NIIT - ICT Hà Nội ngày càng phát triển ^^.

Xem thêm: Tam Hợp Tuổi Hợi Mệnh Gì? Tuổi Hợi Hợp Màu Gì, Hợp Với Tuổi Nào? ?

Trần Ngọc Quỳnh - Marketing - VTC Mobile

Mình thấy rằng chất lượng đào tạo luôn được NIIT - ICT Hà Nội coi trọng. Cái mình học được ở đây là cách suy nghĩ như một lập trình viên, áp dụng CNTT để làm việc mình yêu thích.

Nguyễn Thành Luân - Graphics Designer tại Reface Studio

Quãng thời gian học tại NIIT - ICT Hà Nội đã giúp mình trưởng thành rất nhiều. Hiện tại nghiệp code cũng khá là suôn sẻ. Chúc các em khóa sau học thật tốt nhé!