GuildCrafts · ReanyAlex · May 16, 2017 · May 16, 2017 · May 16, 2017
diff --git a/async/exercises/ex1/README.md b/async/exercises/ex1/README.md
@@ -0,0 +1,9 @@
+# Instructions
+
+1. This exercise calls for you to write some async flow-control code. To start off with, you'll use callbacks only.
+
+2. Expected behavior:
+	- Request all 3 files at the same time (in "parallel").
+	- Render them ASAP (don't just blindly wait for all to finish loading)
+	- BUT, render them in proper (obvious) order: "file1", "file2", "file3".
+	- After all 3 are done, output "Complete!".
diff --git a/async/exercises/ex1/ex1.html b/async/exercises/ex1/ex1.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Exercise 1</title>
+</head>
+<body>
+<h1>Exercise 1</h1>
+
+<script src="ex1.js"></script>
+
+</body>
+</html>
diff --git a/async/exercises/ex1/ex1.js b/async/exercises/ex1/ex1.js
@@ -0,0 +1,65 @@
+function fakeAjax(url,cb) {
+	var fake_responses = {
+		"file1": "The first text",
+		"file2": "The middle text",
+		"file3": "The last text"
+	};
+	var randomDelay = (Math.round(Math.random() * 1E4) % 8000) + 1000;
+
+	console.log("Requesting: " + url);
+
+	setTimeout(function(){
+		cb(fake_responses[url]);
+	},randomDelay);
+}
+
+function output(text) {
+	console.log(text);
+}
+
+// **************************************
+// The old-n-busted callback way
+//this is called each time we getFile
+function getFile(file) {
+	fakeAjax(file,function(text){
+		//calls a function to handle the response from the AJAX
+		handleResponse(file,text);
+	});
+}
+//an object to hold information to see what has returned already
+var responses = {};
+
+function handleResponse(file,cont) {
+	//Checks to see if the file exists in the holding object
+	if (!(file in responses)) {
+		//if it doesn't exist add it to the object
+		responses[file] = cont;
+	}
+	//holds the order of the ways we want the files to display
+	var fileOrder = ["file1","file2","file3"];
+	//itterates over the array to check if all files are been retrieved
+	for (var i = 0; i < fileOrder.length; i++) {
+		//checks if the file has been added to response
+		console.log(responses);
+		if (fileOrder[i] in responses) {
+			//makes sure to only display items that haven't already been displayed
+			if (typeof responses[fileOrder[i]] == "string") {
+				//function that just logs the argument
+				output(responses[fileOrder[i]]);
+				responses[fileOrder[i]] = false;
+			}
+		}
+		else {
+					return;
+		}
+	}
+	//function that just logs the argument
+	output("Complete");
+}
+
+
+
+// request all files at once in "parallel"
+getFile("file1");
+getFile("file2");
+getFile("file3");
diff --git a/async/exercises/ex2/README.md b/async/exercises/ex2/README.md
@@ -0,0 +1,9 @@
+# Instructions
+
+1. You'll do the same thing as the previous exercise(s), but now you should use thunks.
+
+2. Expected behavior:
+	- Request all 3 files at the same time (in "parallel").
+	- Render them ASAP (don't just blindly wait for all to finish loading)
+	- BUT, render them in proper (obvious) order: "file1", "file2", "file3".
+	- After all 3 are done, output "Complete!".
diff --git a/async/exercises/ex2/ex2.html b/async/exercises/ex2/ex2.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Exercise 2</title>
+</head>
+<body>
+<h1>Exercise 2</h1>
+
+<script src="ex2.js"></script>
+
+</body>
+</html>
diff --git a/async/exercises/ex2/ex2.js b/async/exercises/ex2/ex2.js
@@ -0,0 +1,61 @@
+function fakeAjax(url,cb) {
+	var fake_responses = {
+		"file1": "The first text",
+		"file2": "The middle text",
+		"file3": "The last text"
+	};
+	var randomDelay = (Math.round(Math.random() * 1E4) % 8000) + 1000;
+
+	console.log("Requesting: " + url);
+
+	setTimeout(function(){
+		cb(fake_responses[url]);
+	},randomDelay);
+}
+
+function output(text) {
+	console.log(text);
+}
+
+// **************************************
+//active thunk generator
+function getFile(file) {
+	var text;
+	var fn;
+
+	fakeAjax(file,function(res){
+		if (fn) {
+				fn(res)
+		}else {
+			text = res;
+		}
+	});
+
+	//return this callback for the thunks
+	return function(cb) {
+		//if the information has arrived return the cb function
+		if (text) {
+				cb(text)
+		//if not then set fn to cb I think it is undefined
+		}else {
+			fn = cb;
+		}
+	};
+}
+
+// generate the thunks before you need to display them
+var thunk1 = getFile("file1")
+var thunk2 = getFile("file2")
+var thunk3 = getFile("file3")
+
+//won't display the inner nest until the outer nest gets the neccessary arguments
+thunk1(function(text1) {
+	output(text1);
+	thunk2(function(text2) {
+		output(text2);
+		thunk3(function(text3){
+			output(text3);
+			output("completed");
+		})
+	})
+})
diff --git a/async/exercises/ex3/README.md b/async/exercises/ex3/README.md
@@ -0,0 +1,9 @@
+# Instructions
+
+1. You'll do the same thing as the previous exercise(s), but now you should use promises.
+
+2. Expected behavior:
+	- Request all 3 files at the same time (in "parallel").
+	- Render them ASAP (don't just blindly wait for all to finish loading)
+	- BUT, render them in proper (obvious) order: "file1", "file2", "file3".
+	- After all 3 are done, output "Complete!".
diff --git a/async/exercises/ex3/ex3.html b/async/exercises/ex3/ex3.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Exercise 3</title>
+</head>
+<body>
+<h1>Exercise 3</h1>
+
+<script src="npo.js"></script>
+<script src="ex3.js"></script>
+
+</body>
+</html>
diff --git a/async/exercises/ex3/ex3.js b/async/exercises/ex3/ex3.js
@@ -0,0 +1,50 @@
+function fakeAjax(url,cb) {
+	var fake_responses = {
+		"file1": "The first text",
+		"file2": "The middle text",
+		"file3": "The last text"
+	};
+	var randomDelay = (Math.round(Math.random() * 1E4) % 8000) + 1000;
+
+	console.log("Requesting: " + url);
+
+	setTimeout(function(){
+		cb(fake_responses[url]);
+	},randomDelay);
+}
+
+function output(text) {
+	console.log(text);
+}
+
+// **************************************
+
+function getFile(file) {
+	// creates a new promise
+	return new Promise(function(resolve){
+		fakeAjax(file,resolve);
+	});
+}
+
+//set the variable to the retrieved promise object
+var prom1 = getFile("file1");
+var prom2 = getFile("file2");
+var prom3 = getFile("file3");
+
+//call the information one after another in order
+prom1
+.then(output)
+.then(function(){
+	return prom2;
+})
+.then(output)
+.then(function(){
+	return prom3;
+})
+.then(output)
+.then(function(){
+	output("Complete")
+})
+.catch(function(err){
+	output(err)
+})
diff --git a/async/exercises/ex3/npo.js b/async/exercises/ex3/npo.js
diff --git a/async/exercises/ex4/README.md b/async/exercises/ex4/README.md
@@ -0,0 +1,9 @@
+# Instructions
+
+1. You'll do the same thing as the previous exercise(s), but now you should use map/reduce, promises, and an array of files.
+
+2. Expected behavior:
+	- Request all 3 files at the same time (in "parallel").
+	- Render them ASAP (don't just blindly wait for all to finish loading)
+	- BUT, render them in proper (obvious) order: "file1", "file2", "file3".
+	- After all 3 are done, output "Complete!".
diff --git a/async/exercises/ex4/ex4.html b/async/exercises/ex4/ex4.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Exercise 4</title>
+</head>
+<body>
+<h1>Exercise 4</h1>
+
+<script src="ex4.js"></script>
+
+</body>
+</html>
diff --git a/async/exercises/ex4/ex4.js b/async/exercises/ex4/ex4.js
@@ -0,0 +1,39 @@
+function fakeAjax(url,cb) {
+	var fake_responses = {
+		"file1": "The first text",
+		"file2": "The middle text",
+		"file3": "The last text"
+	};
+	var randomDelay = (Math.round(Math.random() * 1E4) % 8000) + 1000;
+
+	console.log("Requesting: " + url);
+
+	setTimeout(function(){
+		cb(fake_responses[url]);
+	},randomDelay);
+}
+
+function output(text) {
+	console.log(text);
+}
+
+// **************************************
+// The old-n-busted callback way
+
+function getFile(file) {
+	return new Promise(function(resolve){
+		fakeAjax(file,resolve);
+	});
+}
+
+["file1","file2","file3"]
+//go over the array
+.map(getFile)
+// transform the file array to an array of promise objects
+.reduce(function combine(chain,promise) {
+	return chain.then(function () {
+		return promise;
+	}).then(output)
+}, Promise.resolve()).then(function() {
+	output("complete")
+})
diff --git a/async/exercises/ex4/npo.js b/async/exercises/ex4/npo.js
diff --git a/async/exercises/ex5/README.md b/async/exercises/ex5/README.md
@@ -0,0 +1,9 @@
+# Instructions
+
+1. You'll do the same thing as the previous exercise(s), but now you should use asynquence.
+
+2. Expected behavior:
+	- Request all 3 files at the same time (in "parallel").
+	- Render them ASAP (don't just blindly wait for all to finish loading)
+	- BUT, render them in proper (obvious) order: "file1", "file2", "file3".
+	- After all 3 are done, output "Complete!".