Skip to content

Commit 62a1cc8

Browse files
committed
More Asyncs
1 parent 301d207 commit 62a1cc8

4 files changed

+164
-0
lines changed

Async code after main thread.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
//Asynchronous code is always executed after the main thread
2+
setTimeout(function() { //this code executed at the end.
3+
console.log('I am an asynchronous message');
4+
}); // You can omit the 0
5+
6+
console.log('Test 1');
7+
8+
for (let i = 0; i < 10000; ++i) {
9+
doSomeStuff();
10+
}
11+
12+
console.log('Test 2');
13+
14+
// The 'I am an asynchronous message' will be displayed when the main thread reach here
15+
16+
function doSomeStuff() {
17+
return 1 + 1;
18+
}

Async working example.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
</head>
5+
6+
<body>
7+
<button id="sync" onclick="request(false);">Synchronous button</button>
8+
<br />
9+
<button id="async" onclick="request(true);">Asynchronous button</button>
10+
11+
<div id="content"></div>
12+
13+
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
14+
<script type="text/javascript">
15+
var requesting = false;
16+
17+
function request(async) {
18+
if (requesting) {
19+
return;
20+
}
21+
22+
requesting = true;
23+
24+
var content = $('#content');
25+
26+
content.text('Requesting ...');
27+
28+
$.ajax({
29+
url: 'content.html',
30+
async: async,
31+
success: function(data) {
32+
content.text(data);
33+
requesting = false;
34+
}
35+
});
36+
}
37+
</script>
38+
</body>
39+
</html>
+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
//Asynchronous code using setInterval
2+
let counter = 0;
3+
4+
let timer = setInterval(function() {
5+
console.log('I am an asynchronous message');
6+
7+
counter += 1;
8+
9+
if (counter >= 5) {
10+
clearInterval(timer);
11+
}
12+
}, 2000);
13+
14+
console.log('I am a synchronous message');
15+
16+
//setInterval has the same behavior as setTimeout but the code is executed multiple times.
17+
//You have to call clearInterval to kill the timer.
18+
19+
// Performing an HTTP request
20+
// Any I/O operation when you are in a NodeJS environment
21+
// Dealing with a WebSocket (client or server side)

Promise moreover.js

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
// //First promise example
2+
3+
// var promise = new Promise(function(resolve, reject) {
4+
// setTimeout(function() {
5+
// resolve('hello world');
6+
// }, 2000);
7+
// });
8+
9+
// promise.then(function(data) {
10+
// console.log(data);
11+
// });
12+
13+
// //Multiple Callbacks
14+
15+
// // var promise = new Promise(function(resolve, reject) {
16+
// // setTimeout(function() {
17+
// // resolve('hello world');
18+
// // }, 2000);
19+
// // });
20+
21+
// // promise.then(function(data) {
22+
// // console.log(data + ' 1');
23+
// // });
24+
25+
// // promise.then(function(data) {
26+
// // console.log(data + ' 2');
27+
// // });
28+
29+
// // promise.then(function(data) {
30+
// // console.log(data + ' 3');
31+
// // });
32+
33+
// //Error handling when error happen
34+
35+
// // var promise = new Promise(function(resolve, reject) {
36+
// // setTimeout(function() {
37+
// // reject('We are all going to die');
38+
// // }, 2000);
39+
// // });
40+
41+
// // promise.then(function success(data) {
42+
// // console.log(data);
43+
// // }, function error(data) {
44+
// // console.error(data);
45+
// // });
46+
47+
// //When an error happens with multiple callbacks
48+
49+
// var promise = new Promise(function(resolve, reject) {
50+
// setTimeout(function() {
51+
// reject('We are all going to die');
52+
// }, 2000);
53+
// });
54+
55+
// promise.then(function success(data) {
56+
// console.log(data + ' 1');
57+
// }, function error(data) {
58+
// console.error(data + ' 1');
59+
// });
60+
61+
// promise.then(function success(data) {
62+
// console.log(data + ' 2');
63+
// }, function error(data) {
64+
// console.error(data + ' 2');
65+
// });
66+
67+
// promise.then(function success(data) {
68+
// console.log(data + ' 3');
69+
// }, function error(data) {
70+
// console.error(data + ' 3');
71+
// });
72+
73+
// Calling resolve multiple times
74+
75+
var promise = new Promise(function(resolve, reject) {
76+
setTimeout(function() {
77+
resolve('hello world 1');
78+
resolve('hello world 2');
79+
resolve('hello world 3');
80+
resolve('hello world 4');
81+
}, 1000);
82+
});
83+
84+
promise.then(function success(data) {
85+
console.log(data);
86+
});

0 commit comments

Comments
 (0)