Maria: Asynchronous Programming, 3 weeks

[MMikhailova]

Asynchronous Programming

Learning Objectives

• 🥚 You understand the JavaScript Event Loop, and can demonstrate this by using setTimeout and setInterval to schedule simple tasks.
• 🥚 You can explain why Asynchronous Programming is important for programs that have blocking and non-blocking tasks.
• 🥚 You can explain the basics of the Client/Server model and HTTP requests and can fetch data from RESTful APIs.
• 🐣 You can break down an asynchronous problem into smaller tasks and solve it using promises. This includes identify which tasks depend on each other and which are independent:
  • dependent tasks: The return value from one task is required to start the next task, these must be completed in a specific order - .then
  • independent tasks: These tasks do not use each other's return values, they can be completed at the same time - Promise.allsystem.
• 🐣 You can fetch data from an API and render it into the DOM using /api-calls, /handlers and async/await syntax.
• 🐣 You can write unit tests for functions that return promises using async/await syntax.

[MMikhailova]

Week 1

I pushed my progress in recreating Stopwatch.net here: My Stopwatch

I Need Help With:

When I was recreating Stopwatvh.net, I faced an issue related to counting milliseconds with

  setInterval ( function()=>{}, 1)`.

It doesn't count properly rather too slow. After long searching for a solution in Google, I came across the only way to count ms correctly link.

var startTime = Date.now();
var interval = setInterval(function() {
    var elapsedTime = Date.now() - startTime;
}, 100);

Can you recommend other solution as to milliseconds are counted correctly?

Also how can I extract ms from 0 to 999 from a number: E.g elapsedTime=76102 (ms) ms = 102// ? sec = 16 //This I know min = 1 //know

I did it by msCorrect=(ms / 1000).toFixed(3).toString().split('.')[1] but I'm sure there is an easier way.

What went well?

I understand the JavaScript Event Loop, and can demonstrate this by using setTimeout and setInterval to schedule simple tasks. I found two solution for the timer: first is by counting seconds and then using if loop to get mins and hrs. However, it doesn't work correctly for counting milliseconds and second is the one described above.

What went less well?

It was hard for me to find a solution for counting milliseconds, so I spent some time. I haven't done exercises yet.

Lessons Learned

I am going to finish exercises by Sunday.

[danielhalasz]

Can you recommend other solution as to milliseconds are counted correctly?

here you can read about a slightly more accurate option with performance.now(): https://michaelscodingspot.com/measure-execution-time-in-javascript/

[danielhalasz]

Also how can I extract ms from 0 to 999 from a number: E.g elapsedTime=76102 (ms) ms = 102// ? sec = 16 //This I know min = 1 //know

I did it by msCorrect=(ms / 1000).toFixed(3).toString().split('.')[1] but I'm sure there is an easier way.

sorry but not quite sure what you are trying to achieve here.. 🙁 convert ms to ms?

[MMikhailova]

In given example https://stopwatch.net/ the milliseconds are displayed in '000´ format. It means that after 999 counter starts again from 0. The method that i used counts ms but don't restart after 999. I tried to use 'if loop' but it doesn't work because can't capture the moment correctly. So if I have 1001 ms how can I display 1ms?

I used: performaceSensitiveFunc() { const start = Date.now(); // ... const duration = Date.now() - start; // when timer on 1001 how to show 001 ms? }

[danielhalasz]

check how @samirm00 has done it... by checking if ms is 1000, then adding 1 second to the state and resetting ms to 0: https://github.com/samirm00/stop-watch/blob/main/src/logic/time.js

[MMikhailova]

Week 2

I pushed my progress here: User-AP

I Need Help With:

What is the main difference in using Promises vs Async functions, besides Async function is easier to read.

Can I get any information from a URL by using fetch function or there are limits?

What went well?

I was able to accomplish User task given by Samir and applied changes he suggested. I also helped my classmates and together we have achieved their goals.

What went less well?

It was a hectic week. I had to travel and had a little time to study. Hope to catch up next week.

Lessons Learned

How to get a specific user from a data base by fetching. Using preventDefault() method to prevent an event from happening by default.