Chào mừng bạn đến với hướng dẫn về cách chạy Javascript mỗi giây. Vì vậy, bạn muốn lặp lại vô tận một đoạn mã và kích hoạt nó mỗi giây (hoặc mỗi X giây)?
Cách dễ nhất để chạy Javascript mỗi giây là sử dụng hàm setInterval(). Ví dụ
- function foo () { console.log("RUNNING"); }
- setInterval(foo, 1000);
Điều đó bao gồm những điều cơ bản nhanh chóng, nhưng chúng ta hãy xem qua một vài ví dụ thực tế trong hướng dẫn này. đọc tiếp
ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào
TLDR – TRANG TRÌNH BÀY NHANH
Tải xuống & Ghi chú
TẢI XUỐNG & LƯU Ý
Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa
GHI CHÚ NHANH
Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình
MÃ VÍ DỤ TẢI XUỐNG
Nhấp vào đây để tải xuống mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn hoặc sử dụng nó trong dự án của riêng bạn
CHẠY JAVASCRIPT MỖI GIÂY
Được rồi, bây giờ chúng ta hãy bắt đầu với các ví dụ về cách lặp Javascript mỗi giây
PHƯƠNG PHÁP 1) HẸN GIỜ QUA THỜI GIAN
1 khoảng thời gian đặt. html
<!-- (A) CURRENT TIME WILL BE SHOWN HERE --> <div id="timeNow"></div> <script> // (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML var showTime = () => { let now = new Date(), hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds(); document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`; }; // (C) START INTERVAL var timer = setInterval(showTime, 1000); // TO STOP - clearInterval(timer); </script>Như trong đoạn giới thiệu
- (B) Bắt đầu bằng cách tạo chức năng mà bạn muốn chạy mỗi giây. Trong ví dụ này, nó là showTime()
- (C) Sử dụng setInterval(FUNCTION, DELAY) để tạo bộ hẹn giờ ngắt quãng. Điều này sẽ kích hoạt FUNCTION đã cho cho mỗi DELAY micro giây. TÔI. E. 1000 ms bằng 1 giây
PHƯƠNG PHÁP 2) HÀM ĐỆ QUY
2-đệ quy. html
<!-- (A) CURRENT TIME WILL BE SHOWN HERE --> <div id="timeNow"></div> <script> // (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML var showTime = () => { // (B1) UPDATE HTML let now = new Date(), hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds(); document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`; // (B2) LOOP timer = setTimeout(showTime, 1000); }; // (C) START! var timer = setTimeout(showTime, 0); // TO STOP - clearTimeout(timer); </script>Một thủ thuật đơn giản khác mà chúng tôi sử dụng. Lưu ý thêm về (B2), hàm tự đặt thời gian chờ 1 giây và tự gọi nó theo cách đệ quy
PHƯƠNG PHÁP 3) VÒNG VÒNG VÔ HẠN
3 vòng lặp không đồng bộ. html
<!-- (A) CURRENT TIME WILL BE SHOWN HERE --> <div id="timeNow"></div> <script> // (B) RUN EVERY SECOND TO UPDATE TIME var showTime = async () => { while (true) { // (B1) UPDATE CURRENT TIME let now = new Date(), hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds(); document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`; // (B2) WAIT FOR 1 SECOND await new Promise(resolve => setTimeout(resolve, 1000)); }}; // (C) START! showTime(); </script>Cuối cùng, đây là một “giải pháp hiện đại” thú vị
- (B) Ý tưởng cơ bản là tạo ra một vòng lặp <!-- (A) CURRENT TIME WILL BE SHOWN HERE --> <div id="timeNow"></div> <script> // (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML var showTime = () => { // (B1) UPDATE HTML let now = new Date(), hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds(); document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`; // (B2) LOOP timer = setTimeout(showTime, 1000); }; // (C) START! var timer = setTimeout(showTime, 0); // TO STOP - clearTimeout(timer); </script>0 vô tận. Nhưng vì điều này sẽ chặn và “treo” toàn bộ trang, nên nó chỉ có thể được thực hiện trong một <!-- (A) CURRENT TIME WILL BE SHOWN HERE --> <div id="timeNow"></div> <script> // (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML var showTime = () => { // (B1) UPDATE HTML let now = new Date(), hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds(); document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`; // (B2) LOOP timer = setTimeout(showTime, 1000); }; // (C) START! var timer = setTimeout(showTime, 0); // TO STOP - clearTimeout(timer); </script>1
- (B2) Vào cuối mỗi chu kỳ, chúng tôi thực hiện một <!-- (A) CURRENT TIME WILL BE SHOWN HERE --> <div id="timeNow"></div> <script> // (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML var showTime = () => { // (B1) UPDATE HTML let now = new Date(), hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds(); document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`; // (B2) LOOP timer = setTimeout(showTime, 1000); }; // (C) START! var timer = setTimeout(showTime, 0); // TO STOP - clearTimeout(timer); </script>2. Điều này hơi khó hiểu, nhưng về cơ bản, nó đợi 1 giây trước khi tự lặp lại
BIT BỔ SUNG & LIÊN KẾT
Đó là tất cả cho hướng dẫn này và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn
CÁI NÀO TỐT HƠN?
Cá nhân, tôi thích setInterval(). Đây là phương pháp truyền thống nhất và dễ hiểu nhất. Trong khi một số người có thể lập luận rằng <!-- (A) CURRENT TIME WILL BE SHOWN HERE --> <div id="timeNow"></div> <script> // (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML var showTime = () => { // (B1) UPDATE HTML let now = new Date(), hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds(); document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`; // (B2) LOOP timer = setTimeout(showTime, 1000); }; // (C) START! var timer = setTimeout(showTime, 0); // TO STOP - clearTimeout(timer); </script>4 vô hạn hoạt động tốt hơn, bởi vì nó chạy song song – tôi sẽ nói, chỉ cần chuyển một <!-- (A) CURRENT TIME WILL BE SHOWN HERE --> <div id="timeNow"></div> <script> // (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML var showTime = () => { // (B1) UPDATE HTML let now = new Date(), hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds(); document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`; // (B2) LOOP timer = setTimeout(showTime, 1000); }; // (C) START! var timer = setTimeout(showTime, 0); // TO STOP - clearTimeout(timer); </script>5 vào setInterval() rồi. 🙄
LIÊN KẾT và THAM KHẢO
- Đặt khoảng thời gian trên MDN
- Đặt thời gian chờ trên MDN
- chức năng không đồng bộ
- Đang chờ trên MDN
BẢNG CHEAT INFOGRAPHIC
Cảm ơn bạn đã đọc, và chúng tôi đã đi đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc