Calculate time taking by a function using javscript

14-Sep-2024

S.no	Contents-topics
1	What is time compexity
2	Calculate time taken by function
3	Calculate total laoding time by page
4	Total excution time in function

1:What is time complexity ?

Time Complexity means time taken to complete a task whether the task is to calculate time for excution of a function , loading time of a page or may be sometimes like total time for getting data from backend or using some apis .

2:Calculate time taken by function

Here we are considering function by showing how to calculate time complexity by a function like as shown we are using startTime and endTime variables to calculate the time difference in a function
code for cal time: Copy

const startTime = performance.now();

const endTime = performance.now();

console.log("start = "+startTime);

console.log("end = "+endTime);

const totalTime = endTime - startTime;

console.log("Total Time " + totalTime + " in milliseconds");

</script>

3:Calculate total loading time by page.

Also read:READ A LOCAL TEXT FILE USING JAVASCRIPT

Here we are calculating total laoding time by page like sometimes working on some projcts where we want to calculate the total time taken by laoding a page , here is how we can calculate by by intializing startTime variable in the starting of the page and at the end of the page we are usning endTime variable so to calculate the time difference of laoding page
code for time loading page: Copy

const startTime = performance.now();

</script>

<!DOCTYPE html>

<head>

<title>Calculate Performance</title>

</head>

<body>

<h2>Registration form</h2>

<label for="exampleInputEmail1">Email address</label>

<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>

</div>

<label for="exampleInputPassword1">Password</label>

</div>

<label for="exampleInputPassword2">Confirm Password</label>

</div>

<label class="form-check-label" for="exampleCheck1">Show Password</label>

</div>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>

const endTime = performance.now();

console.log("start = "+startTime);

console.log("end = "+endTime);

const totalTime = endTime - startTime;

console.log("Total Time " + totalTime + " in milliseconds");

</script>

So here we are using simple registration template to check how much time it will take to load the page in console it shows the start = 1761.19 and end = 1892.30 so the total time is 131.10 in milliseconds.

Also read:TOGGLE PASSWORD VISIBILITY USING JAVASCRIPT

3:Total execution time in function

But if you want to check the total time execution of function then use this , as we are using a ajax request which calclute the time from the data that comes from backend request
code for cal time in function Copy

<!DOCTYPE html>

<head>

<title>Developer Corner</title>

</head>

<body>

<h2>Registration form</h2>

@csrf

<label for="exampleInputEmail1">Email address</label>

<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>

</div>

<label for="exampleInputPassword1">Password</label>

</div>

<label for="exampleInputPassword2">Confirm Password</label>

</div>

<label class="form-check-label" for="exampleCheck1">Show Password</label>

</div>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>

$("#formSubmit").submit(function(e) {

const startTime = performance.now();

e.preventDefault()

if ($(this).parsley().validate()) {

var url = "{{ url('registration_process') }}";

$.ajax({

url: url,

data: $('#formSubmit').serialize(),

type: 'post',

success: function(result) {

if (result.status == 200) {

console.log("Sumbit Successfully");

} else {

console.log(result);

}

const endTime = performance.now();

const total = endTime - startTime ;

console.log("Total Time "+ total +" in milliseconds");

}

});

}

});

function togglepassword() {

var x = document.getElementsByClassName("pwd");

$.each(x, function(key, val) {

if (val.type === "password") {

val.type = "text";

} else {

val.type = "password";

}

})

}

</script>

So here we are submitting a form using ajax request and check how much time it takes in console.

Tags: check performance of a function usng javascript , calculate time taking by a function using javscript , how to calculate time in page loading usnig javascript,JavaScript,

Vineet Maanas

We are Vineet Maanas we are working as professional developers from the last 8 years and always looking to discover something amazing getting followed by market trends and always push new developers to learn something new with our tutorials Thankyou.