Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Finding the time elapsed in JavaScript
Sometimes, it requires finding the total time elapsed while performing some operations in JavaScript. For example, we require to find the total time elapsed from users who have updated their profiles.
Also, there can be other similar use cases where we need to find the difference between the particular time and the current time, finding the total time elapsed. Here, we will learn various approaches to finding the time elapsed in JavaScript.
Using the Date() Object to find the time Elapsed in JavaScript
In JavaScript, we can get the current time using the Date() object constructor. It returns the total number of milliseconds since 1 January 1970.
Here, we can take a difference of the total milliseconds of two dates to get the time elapsed between two dates.
Syntax
Users can follow the syntax below to use the Date() object constructor to find the time elapsed in JavaScript.
let startTime = new Date(); let endTime = new Date(); let timeElapsed = endTime - startTime;
In the above syntax, first, we have taken the start time. After that, we took taken end time. To get a time elapsed, we have taken the start and end time difference.
Example 1
In the example below, we have stored the current time in the startTime variable. After that, we invoke the loopThrough() function. The function executes the loop for 6,00,000 times.
Once the execution of the function completes, we store the current time in the endTime variable. After that, we take a difference between endTime and startTime to get the total time elapsed while executing the function.
<html>
<body>
<h3> Using the <i> Date() object </i> to find the time elapsed in JavaScript </h3>
<div id="output"> </div>
<script>
let output = document.getElementById('output');
function loopThrough() {
for (i = 0; i < 600000; i++) {
//Do nothing
}
}
let startTime = new Date();
loopThrough();
let endTime = new Date();
let timeElapsed = endTime - startTime;
output.innerHTML += "Total time elapsed to loop through 600000 times: " + timeElapsed + " milliseconds.";
</script>
</body>
</html>
Example 2
The example below shows a time difference between the particular date and the current time. After that, we call a formatDate() function to format a date in days, hours, minutes, and seconds format.
In the formatDate() function, we get the time difference as a parameter and the total number of days, hours, minutes, and seconds. In the output, users can check the total time elapsed from 31st December 2019.
<html>
<body>
<h3> Using the <i> Date() object </i> to find the time elapsed in JavaScript </h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
function formatDate(difference) {
//Arrange the difference of date in days, hours, minutes, and seconds format
let days = Math.floor(difference / (1000 * 60 * 60 * 24));
let hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((difference % (1000 * 60)) / 1000);
output.innerHTML += "Total time elapsed is: " + days + " days " + hours + " hours " + minutes + " minutes " + seconds + " seconds.";
}
let start = new Date("December 31, 2020 23:59:59");
let end = new Date();
let difference = end - start;
formatDate(difference);
</script>
</body>
</html>
Using the Console.time() Function
The console.Time() method takes a label as a parameter. Whenever we invoke a console.time() method with some label, it starts counting the time.
The console.timeEnd() method takes the same label we passed as a parameter of the console.time() method, and prints the time elapsed since the console.time() method called.
Syntax
Users can follow the syntax below to use the console.time() function to find the total time elapsed in JavaScript.
console.time(label); console.timeEnd(label);
In the above syntax, console.time() and console.timeEnd() method takes the same label.
Example 3
In the example below, first, we execute the console.time() method while passing the ‘Execution time’ label as a parameter. After that, we invoke a loop 1,00,000 times. Next, we invoke the console.timeEnd() method with the same label prints the total time elapsed in the console.
// use the console.time() function to find the time elapsed
console.time('Execution time');
for (let i = 0; i < 100000; i++) {
// Iterating through the loop
}
console.timeEnd('Execution time');
Using the Performance.now() Method
Users can use the performance.now() method to get the total time elapsed while executing the JavaScript code. It returns the time elapsed in milliseconds.
Syntax
Users can follow the syntax below to use the performance.now() method to find the time elapsed in JavaScript.
let startTime = performance.now(); let endTime = performance.now(); let timeElapsed = endTime - startTime;
We have taken the difference between the start and end times in the above syntax.
Example 4
In the example below, we have used the performance.now() method when execution of JavaScript code starts. After that, we have used the setTime() method to set the time out of 1000 milliseconds.
Once time out will complete, it will execute the callback function, which will call performance.now() method again and takes a difference between the startTime and endTime to find the total elapsed time.
<html>
<body>
<h3> Using the <i> performance.now() method </i> to find the time elapsed in JavaScript </h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let startTime = performance.now();
setTimeout(function () {
let endTime = performance.now();
let timeElapsed = endTime - startTime;
output.innerHTML = 'Time elapsed: ' + timeElapsed + ' milliseconds';
}, 1000);
</script>
</body>
</html>
Conclusion
Users learned three approaches to find the time elapsed in JavaScript. The first approach is using the Date() object. The second approach is using the console.time() and console.timeEnd() method, which always prints the time in the console. The third approach is using performance.now() method.
14K+ Views
