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>
เราจะเห็นการตอบสนองต่อไปนี้บนหน้าจอ