The D3.timer() function is used to run a timer function after a particular interval of time. The timer will run after a specified delay. The delay given is in milliseconds.
Syntax:
d3.timer(callback, delay);
Parameters: It takes the following two parameters.
- callback: It is a function.
- delay: It is the delay after which the function is executed.
Returns: It returns the Time of datatype Number.
Below given are a few examples of the above function.
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
</style>
<body>
<!-- Fetching from CDN of D3.js -->
<script type = "text/javascript"
src = "https://d3js.org/d3.v4.min.js">
</script>
<script>
let func=function(elapsed) {
console.log(elapsed);
if (elapsed > 500){
console.log("Timer stopped")
timer.stop();
}
}
var timer = d3.timer(func);
</script>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
.originalColor{
height: 100px;
width: 100px;
}
.darkerColor{
height: 100px;
width: 100px;
}
</style>
<body>
<!-- Fetching from CDN of D3.js -->
<script type = "text/javascript"
src = "https://d3js.org/d3.v4.min.js">
</script>
<script>
let func=function(e) {
console.log(e);
if (e>300){
console.log("Timer stopped")
timer.stop();
}
}
// Delay of 2000ms
var timer = d3.timer(func, 2000);
</script>
</body>
</html>
Output:
