How to track execution time of javascript api calls using performance.now #shorts

My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets

[khangle]

Correct me if im wrong, but you only know the request time AFTER you receive the response. So this approach dont solve the problem "if the request took too long then..."

For example, you want to display an warning to user whenever a request took longer than 20s

Using the above approach, lets say a reuest took 3 minutes, then after the full 3 minutes, after you receive the response, only then did the second performance.now() run, and only then we have the number to show user

That is to say, even though we want a warning after 20s, actually after 3 minutes did the user receive that warning

This approach would only benefit if you want to log the behavior or something along that line, not suitable for UI/UX

A better approach for UI/UX would be:
-> start thee request
-> after 20s, if you didnt receive any response, show warning

[ExZeMIP]

Why is this better than Date.now() expect maybe the time is a little bit more precise?

[robohall]

This doesn't make any sense. You wait for the response before telling the user it's taking a long time? Instead, you should race the request against a timeout, if the timeout elapses before the response is received, then notify the user immediately that something is going wrong but hasn't failed yet.

[soniablanche]

btw fetch is now native with node 18, although it gives a warning when you use it

[killprocs]

Editor's font is really motivational for coding.😀 What is the name of this font?

[kareemlateefyomi]

The perf hook is it a built in node class

[devT]

> function fun1(){return "hello"}()
Uncaught SyntaxError: Unexpected token ')'
> function fun2(x){return x*x}(5)
5
> 0, function fun3(x){return x*x}(5)
25

As expected in first case I get error as I didn't use paranthesis. But how the second case and third case get executed?

[advanceringnewholder]

for use case where you just wanna display how long it took to run codes, uses console.time and console.timeend

[jordancarlile]

Didn’t you just do a video on console.time to time things. How is this different?

[yadusolparterre]

Great vid, but you don't need to import fetch anymore

[hadawardgz]

Just passing by to say that you didn't need that main function... ES Modules have top-level await so you don't need to use II(A)FE to be able to use await. I know it was ESM because you are using import~export syntax.

[dylanm]

is this plain javascript or do you use any framework like react ?

[devT]

function fun(y) { return "y * y" }(9)
This statement doesn't show error. Instead returns 9. Why?

[daksheshbaldaniya]

You can easily track time with console.time