Lesson 3

//make something happen after two thousand miliseconds (two seconds)
function hello() {
    alert('Hi! Two seconds passed before you saw this');
}
setTimeout(hello, 2000);

//This called "async", because the order that things happned is no longer in sync (in normal order)
setTimeout(function(){ alert('one'); }, 500);
setTimeout(function(){ alert('three'); }, 1500);
setTimeout(function(){ alert('two'); }, 1000);

//Async things are pretty common in JavaScript because many tasks finish after a delay

//Let's imagine that plussing three numbers together took a really long time.
function heavyMath(a, b, c) {
    var result = 0;

    setTimeout(function() {
        result = a + b + c;
    }, 1000);

    return result;
}

//Now let's use our function
var answer = heavyMath(400, 350, 900);
alert(answer);

//Oh no, it alerted "0" when the real answer is 1650! What happened?

//Because "return result" ran before the numbers were plussed together, due to it taking 1000 miliseconds

//Of course normally plussing together numbers wouldn't take that much time, we are only pretending in this example

//But let's keep pretending, how do we solve this problem? We solve it with a trick called "callback"

//If you recall, you can put functions in variables
var myfun = function() { alert('hello'); }

//And then call the variable as it was a function
myfun();

//You can also do this to argument variables in functions
function doWork(myfun) {
    myfun();
}
function hello() {
    alert('hello');
}

// Whatever we put as the first argument will be called as a function
doWork(hello)

// We could also do it with an inline function
doWork(function() { alert('this also works!'); })

//Now, let's use this knowledge to solve our earlier problem!

//Notice how I've added another argument called "callback" here
function heavyMath(a, b, c, callback) {
    var result = 0;

    setTimeout(function() {
        result = a + b + c;
        callback(result)
    }, 1000);

    return result;
}

//Also notice that I'm treating callback as a function, and giving it the result variable

//So now we can do this

function shout(result) {
    alert('The answer was '+result)
}

heavyMath(400, 350, 900, shout);

//The shout function gets put in the 4th argument named callback

//And since we do callback(result) it becomes the same as shout(result)

//And bam, it has the real result 1650 this time

//In the real world, this callback technique is used for real work that takes time

//The most common example is Ajax

//Ajax is when you tell JavaScript to go fetch a website for you and put the website in a variable

//Here I've coded up a tiny Ajax example


var ajax = function(url, callback){
    var xmlHTTP = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MicrosoftXMLHTTP");
    xmlHTTP.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200)
            callback(this.responseText);
    }
    xmlHTTP.open("GET", url, true);
    xmlHTTP.send();
}

//Notice how it has an argument called callback? That's telling us that we should put a function in there

//Try visiting this website in your browser first: http://jsonplaceholder.typicode.com/posts/1

//It gives you some random data, let's fetch it with Ajax instead of using a browser

function shout(message) {
  alert(message);
}

ajax('http://jsonplaceholder.typicode.com/posts/1', shout);

//So this essensially means, visit this website, and give the result to the shout function

//Ajax is async so doing this wouldn't work:
var answer = ajax('http://jsonplaceholder.typicode.com/posts/1');

//The answer will always be empty because it gives you the result before it's actually done the job

//That's why it's important to know if a function is sync (normal) or async.

//If it has a callback argument, you can pretty much assume it's async

//But if it says "return" at the end, it means it's giving you the answer instantly (sync)

//Async functions with callback are very popular in JavaScript, you'll see them everywhere