async mechanism

Author: rohan-paul

Javascript/event-delegation.md renamed to Javascript/event-delegation-propagation-bubbling.md

@@ -86,6 +86,7 @@ Again - From MDN setTimeout(): - "Code executed by setTimeout() is run in a sepa
 
 #### But does this mean it executes in parallel to any other code that is currently in process?
 
-No, it doesn't. "Execution context" doesn't mean "thread". setTimeout code has absolutely no parallelism going on
+No, it doesn't. "Execution context" doesn't mean "thread". setTimeout code has absolutely no parallelism going on inside it. The "separate execution context" mentioned in the documentation just means that the this reference will be different than in the function where setTimeout() is called.
+A Javascript engine simply processes a queue of events sequentially on a single thread. When the event queue is empty, that thread idles. In a browser, events are added to the queue by user input, page loading, etc. In node.js events can also be HTTP requests or hardware events. And setTimeout() simply adds another kind of event with the additional condition that it should only be added to the queue after a certain time has passed.
 
 [https://johnresig.com/blog/how-javascript-timers-work/](https://johnresig.com/blog/how-javascript-timers-work/)

Javascript/setTimeout-Absolute-Basics.md

@@ -0,0 +1,43 @@
+One of Javascript’s strength is the way it handles asynchronous (async) code. Instead of getting blocked, the thread is pushed in an event queue which gets fired after the execution of all the other codes. This means that you can let your code do several things at the same time without stopping or locking your main thread.
+
+```js
+Console.log( “a” );
+setTimeout(function () {
+Console.log( “c”)
+}, 500 );
+setTimeout(function () {
+Console.log( “d” )
+},  500);
+setTimeout(function () {
+Console.log( “e” )
+},  500);
+Console.log( “b” );
+```
+
+The code above will result with the console displaying “a” and “b” first, then after 500 milliseconds, “c”, “d” and “e” will be displayed.
+
+Note that a timeout will only be executed after all the code in a block has finished executing. If a long-running function is set before the timeout then the function will have to finish executing first before the setTimeout function gets executed.
+
+#### Basically, async functions like setTimeout and setInterval are pushed into a special queue known as the “event loop”.
+
+## The Event Loop - Its a first-in-first-out task queue, or FIFO Queue.
+
+The event loop is a special queue for callback functions. When an async code is executed, a callback is then pushed into the queue. The Javascript engine will only execute the event loop if the code after the async function has finished executing. This is because, Javascript is single threaded.
+
+**The event loop is a first-in-first-out type of queue – callbacks are processed in order they were added to the queue.**
+
+## The Call Stack - Its a LIFO queue .
+
+The event loop (Which on the other hand is FIFO) continuously checks the call stack to see if there’s any function that needs to run.
+
+While doing so, it adds any function call it finds to the call stack and executes each one in order.
+
+JavaScript has a single call stack in which it keeps track of what function we’re currently executing and what function is to be executed after that. But first — what’s a stack? A stack is an array-like data structure but with some limitations — you can only add items to the back and only remove the last item. Another example is a pile of plates — you put them on top of each other and at any time you can only remove the top one.
+
+When you’re about to execute a function it is added on the call stack. Then if that function calls another function — the other function will be on top of the first one in the call stack. When you get an error in the console you get a long message that shows you the path of execution — this is what the stack looked in that exact moment. But what if we make a request or put a timeout on something? In theory that should freeze the entire browser until it is executed so the call stack can continue? In practice however, you know that this doesn’t happen — because of the Event Table and Event Queue.
+
+#### Further Reading
+
+[https://www.hiddenwebgenius.com/guides/understanding-javascripts-asynchronous-code/](https://www.hiddenwebgenius.com/guides/understanding-javascripts-asynchronous-code/)
+
+[https://hackernoon.com/understanding-js-the-event-loop-959beae3ac40](https://hackernoon.com/understanding-js-the-event-loop-959beae3ac40)

Javascript/setTimeout-in-context-of-Asynchronous-Mechanism.md

@@ -1,5 +1,5 @@
-require("es6-promise").polyfill();
-require("isomorphic-fetch");
+require("es6-promise").polyfill()
+require("isomorphic-fetch")
 
 /* I had to use the above packages as without it the simple fetch.('url') wont work
 https://stackoverflow.com/questions/36484156/es6-fetch-is-undefined
@@ -13,15 +13,15 @@ getJSON = () => {
       // The data from the request is available in a .then block
       // We return the result using resolve.
       .then(json => {
-        resolve(json);
-        console.log("Successively fetched");
-      });
-  });
-};
+        resolve(json)
+        console.log("Successively fetched")
+      })
+  })
+}
 
-getJSON(); // Will fetch and then print "Successively fetched"
+getJSON() // Will fetch and then print "Successively fetched"
 
-/* EXPLANATION OF THE ABOVE -  The Fetch API provides an interface for making network requests, returning Promises for us to resolve. To use it to get the data, I chain together a single .then callback. The callback receives the Response object and return back its JSON data. And then console.logs it.
+/* EXPLANATION OF THE ABOVE -  The Fetch API provides an interface for making network requests, returning Promises for us to resolve. To use it to get the data, I chain together a single .then() callback. The callback receives the Response object and return back its JSON data. And then console.logs it.
  */
 
 /* REMEMBER THE FETCH SYNTAX
@@ -42,12 +42,12 @@ fetch(url) // Call the fetch function passing the url of the API as a parameter
 
 const getJSONAsync = async () => {
   // The await keyword saves us from having to write a .then() block.
-  let json = await fetch("https://tutorialzine.com/misc/files/example.json");
+  let json = await fetch("https://tutorialzine.com/misc/files/example.json")
 
-  return json && console.log("Fetched with async");
-};
+  return json && console.log("Fetched with async")
+}
 
-getJSONAsync(); // Will fetch and then print "Fetched with async"
+getJSONAsync() // Will fetch and then print "Fetched with async"
 
 /* The await expression causes async function execution to pause until a Promise is resolved, that is fulfilled or rejected, and to resume execution of the async function after fulfillment. When resumed, the value of the await expression is that of the fulfilled Promise.
 

Promise-Async-Await-Sequential-Execution/async-await-master-notes/async-await-1.js

@@ -0,0 +1,17 @@
+/* Making setTimeout an async/await function. On more than one occasion I’ve wanted to wait a number of seconds in JavaScript. Normally,setTimeout() is fine for this, but what about the case when you are using async/await syntax?
+
+And an simple example of its use, perhaps looping over some API calls but delaying a second between each (rate limiting) - So your api calls dont get blocked for hitting the API
+ */
+const wait = async ms => {
+  return new Promise(resolve => {
+    setTimeout(resolve, ms)
+  })
+}
+
+// Now make the api call from an array of Uris given as arguments to the functions, after waiting 1000 ms between each
+const doRequest = async uris => {
+  for (let uri of uris) {
+    await fetch(uri)
+    await wait(1000)
+  }
+}