D3.js - Timer API

โมดูล Timer API ใช้เพื่อแสดงภาพเคลื่อนไหวพร้อมกันด้วยการหน่วงเวลาที่ซิงโครไนซ์ มันใช้requestAnimationFrameสำหรับแอนิเมชั่น บทนี้จะอธิบายรายละเอียดโมดูล Timer API

requestAnimationFrame

วิธีนี้จะบอกเบราว์เซอร์ว่าคุณต้องการแสดงภาพเคลื่อนไหวและขอให้เบราว์เซอร์เรียกใช้ฟังก์ชันที่ระบุเพื่ออัปเดตภาพเคลื่อนไหว

การกำหนดค่าตัวจับเวลา

เราสามารถโหลดตัวจับเวลาได้โดยตรงจาก d3js.org โดยใช้สคริปต์ต่อไปนี้

<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script>
   var timer = d3.timer(callback);
</script>

วิธีจับเวลา API

Timer API รองรับวิธีการที่สำคัญดังต่อไปนี้ ทั้งหมดนี้มีคำอธิบายโดยละเอียดดังนี้

d3.now ()

วิธีนี้จะคืนค่าเวลาปัจจุบัน

d3.timer (โทรกลับ [ล่าช้า [เวลา]])

วิธีนี้ใช้เพื่อตั้งเวลาจับเวลาใหม่และเรียกใช้ตัวจับเวลาจนกว่าจะหยุด คุณสามารถตั้งค่าการหน่วงเวลาเป็นตัวเลขใน MS ได้ แต่จะเป็นทางเลือกหรือไม่ก็ได้ค่าเริ่มต้นเป็นศูนย์ หากไม่ระบุเวลาจะถือว่าเป็น d3.now ()

timer.restart (โทรกลับ [ล่าช้า [เวลา]])

รีสตาร์ทตัวจับเวลาด้วยการโทรกลับที่ระบุและการหน่วงเวลาและเวลาเสริม

timer.stop ()

วิธีนี้จะหยุดตัวจับเวลาป้องกันการโทรกลับในภายหลัง

d3.timeout (โทรกลับ [ล่าช้า [เวลา]])

ใช้เพื่อหยุดตัวจับเวลาในการโทรกลับครั้งแรก การโทรกลับจะถูกส่งผ่านตามเวลาที่ผ่านไป

d3.interval (โทรกลับ [ล่าช้า [เวลา]])

มันถูกเรียกใช้ในช่วงเวลาหน่วงเวลาเฉพาะ หากไม่ระบุความล่าช้าจะใช้เวลาจับเวลา

ตัวอย่าง

สร้างหน้าเว็บ“ timer.html” และเพิ่มสคริปต์ต่อไปนี้

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> Timer API </h3>
      <script>
         var timer = d3.timer(function(duration) {
            console.log(duration);
            if (duration > 150) timer.stop();
         }, 100);
      </script>
   </body>
</html>

เราจะเห็นการตอบสนองต่อไปนี้บนหน้าจอ