Timer API in D3.js
2020-09-15 23:49:18

Timer API in D3.js

Timer API in D3.js

The timer API module is used to implement the concurrent animations with the delay of synchronization timing. For designing purpose, the timer API uses the requestAnimationFrame. In this chapter, we will explain the details of timer API.

requestAnimationFrame

This framing method can be applied to notify the web browser at the time of designing the animation. It will also help you to update the animations by invoking a defined function.

Configuration of Timer API

You can use the following script which will help you to configure the timer API from “d3js.org.”

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

Timer API Methods

Here, we have some essential methods which are listed below used in timer API.

  • d3.now()
  • timer.restart(callback[, delay[, time]])
  • d3.timer(callback[, delay[, time]])
  • d3.timeout(callback[, delay[, time]])
  • timer.stop()
  • timerFlush
  • d3.interval(callback[, delay[, time]])

Let’s discuss each method of timer API in detail.

d3.now()

This method can be applied to return the current time and also used to obtain the page loading time. This time slot is represented in ms (milliseconds). It is also useful when you want to trigger any event at a stated time. d3.now()  method also has a function named performance.now that helps you to find out the elapsed time.

Important Point: If the performance.now function is not defined, then this method uses Date.now function.  

timer.restart(callback[, delay[, time]])

It can be applied if you want to restart the timer with the defined timer, callback, and delay. The delay is optional to use in it.

d3.timer(callback[, delay[, time]])

This method allows you to organize the timer and also call the timer until it stops. You can fix the numeric delay in the form of milliseconds (ms), but it is not mandatory to use; otherwise, it will, by default, returns the 0 value. If you don’t define the time, then it will be treated as the d3.now() method.   

d3.timeout(callback[, delay[, time]])

If you want to stop the timer during the staring callback function, then you can use this method of timer API. The callback function can be declared similar to elapsed time.

timer.stop()

This method can be applied to stop the timer. It will also help you to avoid the consecutive callback. If the timer is stopped, then it doesn’t have any issue for the method.

timerFlush

This method can be applied to invoke the callback of the zero-delay timer rapidly.

d3.interval(callback[, delay[, time]])

This method can be called on the time delay interval, and if you do not define the delay time, then it will use the time of the current timer.

Example    

Here, we have an example of timer API is explained below. 

<!DOCTYPE html>   
<html lang="en">   
<head>   
<meta charset="UTF-8">   
<meta name="viewport"  
content="width=device-width, initial-scale=1.0">   
<title> Timer API </title>   
</head>   
<style>   
</style>   
<body>   
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js">   
</script>   
<script>   
let func=function(elapsed) {   
document.write(elapsed);  
document.write("<br>");  
if (elapsed > 500){   
document.write("Timer stopped")   
timer.stop();   
}   
}   
var timer = d3.timer(func);   
</script>   
</body>   
</html>  

Output

After the execution of the above code, you got the following output.

Timer API in D3.js