-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
112 lines (106 loc) · 5.36 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
<title>Asynchronous code</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
</head>
<body>
<div id="app">
<h1>Asynchronous code</h1>
<section>
<h2>Introduction</h2>
<p>
Javascript interpreters typically employ a synchronous model when
running the code that you supply to them. This means that each
instruction is executed before the next instruction. This is a
simplification of what exactly happens but you can get a good mental
model by thinking of it this way (in fact there are several passes
over the code before the instructions are actually executed). Take
this code for an example:
</p>
<pre><code class='javascript'>
function second() {
// do something
}
function first() {
// do something
}
first();
second();
</code></pre>
<p>
The function called <span class="methodName">first</span> will be
fully executed before execution begins on
<span class="methodName">second</span>.
</p>
<p>Typically this is achieved using what is referred to as the event loop. Each instruction is added to a queue and after each
instruction has executed the next item in the queue is removed and executed. When you click a button or interact with a DOM element that has a bound event listener a new instruction
is added to the queue and executed when its turn comes. This is why expensive computation can make a browser instance seem unresponsive to clicks etc. Events like
<span class='methodName'>setInterval</span> and <span class='methodName'>XMLHttpRequest</span> will handle the underlying mechanism in a separate thread (in the browser at least) and add
instructions to the queue that will execute callbacks as the status of the underlying process changes (e.g. the timeout expires, data is received from a server). As these types of events
are processed in a separate thread they are less likely to suffer from general high load from other Javascript code running.</p>
<p>In order for this all to be useful, there needs to be a way for programmers to specify the instructions that they want executed when various asynchronous events happened. The original
solution that would be used was callbacks. A callback is a function that will be called when the event occurs with various parameters related to the specific event instance that necessitated
the call.
</p>
</section>
<section>
<h2>Callbacks</h2>
<p>
The earliest way of handling asynchronous code in Javascript was by
defining a function that would be called when some asynchronous event
happened. In some cases, for instance the DOM events provided by
browsers, the function would be stored and the browser would wait for
some sort of user interaction before invoking the function. In other
cases, for instance fetching data, the interpreter will wait for a
non-user-generated event before invoking the function.
</p>
</section>
<section>
<h2>Callback style</h2>
<p>
Write an event handler for the button below using a callback style. It
should make a call to
<span class="methodName">getDataCallback</span> with a callback that
formats the returned data and displays the number of results.
</p>
<p>
<span class="methodName">getDataCallback</span> has the following
definition:
</p>
<blockquote>
<span class="methodName">
getDataCallback</span>(endpoint, callback)
<span class="variableName">endpoint</span> <span class='typeName'>String</span>
<span class="variableName">callback</span> <span class='typeName'>Function(err, response)</span>
The provided callback will be called once the data has been retrieved. The value of err
will be either:
* <span class='keyword'>null</span> if the request was successful
* A <span class='typeName'>String</span> describing an error if something went wrong with the request
The value of response will be an <span class='typeName'>Object</span> with the following
shape:
{
<span class="variableName">statusCode</span>: <span class='typeName'>Number</span>,
<span class="variableName">body</span>: <span class='typeName'>Object</span>
}
The body property of the response is optional and may not be defined in the case of an
error.
</blockquote>
<p>Next to the callback button should be a div with id <b>callbackResult</b>, please populate this with the <span class='variableName'>results</span> property from the <span class='variableName'>body</span></p>
<button id="callbackClickBtn">Click</button><div id='callbackResult'></div>
</section>
<section><h2>Promises</h2></section>
<section>
<h2>Promise style</h2>
<p>
Implement <span class="methodName">getDataPromise</span> in the
<span class="moduleName">getData</span> module.
</p>
<button id="promiseClickBtn">Click</button>
</section>
</div>
<script src="src/index.js"></script>
</body>
</html>