Thời gian cập nhật Javascript mỗi giây

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

Làm cách nào để đợi 1 giây trong JavaScript?

Để sử dụng setTimeout đợi một giây trong JavaScript, bạn phải chuyển hai đối số cho hàm. gọi lại và độ trễ số nguyên, tính bằng mili giây . Hàm gọi lại là mã mà bạn muốn thực thi sau độ trễ đã chỉ định. Ví dụ. setTimeout(() => { console.

Làm cách nào để cập nhật giây trong JavaScript?

phương thức reload() giúp tải lại URL hiện tại và làm mới trang web. Sử dụng vị trí. phương thức reload() trong setTimeout() để tải lại trang sau một số giây cụ thể bằng JavaScript

Làm cách nào để cập nhật thời gian trong js?

Hai phương pháp chính để sử dụng với JavaScript là. .
setTimeout(function, milliseconds ) Thực thi một chức năng, sau khi đợi một số mili giây đã chỉ định
setInterval(function, milliseconds ) Tương tự như setTimeout(), nhưng lặp lại việc thực thi hàm liên tục

Làm cách nào để gọi một hàm mỗi giây trong JavaScript?

Sử dụng phương thức setInterval để gọi hàm mỗi giây . Tất cả những gì chúng ta cần là chức năng chúng ta muốn gọi mỗi giây và khung thời gian chúng ta muốn lặp lại cuộc gọi chức năng.