And that means anything that comes after this event handler right here will obviously come first. So like this, console.log before, then we log after, then we click on the button, and then we alert. Right? So let's change that to console.log, and then final thing, we will track down the button. So let's say var button equals document.querySelector('button'). And let's add that to the page. So I will hit Command Option I on the Mac to bring up Chrome DevTools, and let's run this with JavaScript.

It's okay if it's still kind of foggy. It takes a little while to kind of figure out how all of this stuff works and how we simulate a multi-threaded language. Now as a User, all you really need to know, at least to start, is that when you're reading an API for a library or something like that, and they tell you to call then, that's your indication that this thing is a promise. And you're going to find this with lots of things that should naturally be asynchronous, like an AJAX request, or reading a file, or processing something that takes a very long time. So they will return a promise to you, which you can then operate on at a later time.

So now you're thinking, well, what's the point of creating this promise if we just run it immediately? Well, this function, they call it the executor. I think that's what it's called. It's mostly like your bootstrap for the promise. So this is where you would arrange anything that needs to take place. But now the key element here is that your anonymous function will accept a resolve as well as reject arguments. And these are functions that you can trigger dependent upon the outcome of your operation. So you can imagine here, you can manually make an AJAX request.

And these are functions that you can trigger dependent upon the outcome of your operation. So you can imagine here, you can manually make an AJAX request. And if everything processed as you would hope, you call resolve and you're all set to go. Or if an error was thrown, you call reject. And this is specifically connected to thing.then. So if I say resolve right here, well, thing.then will only trigger once you call resolve. Otherwise, nothing will happen here. So let's try this. Let's make it a little easier to understand.

So let's try this. Let's make it a little easier to understand. I'm going to console.log and just say init promise. Why don't we set a setTimeout here after how about five seconds? And I'm going to console.log timeout done. Okay, so if we run this with JavaScript, two, three, four, five, there it goes. The timeout expires. But now what if we want to do something after that? So we could say, how about this, timer, then trigger this function and we will say console.log proceed now that timer has concluded or something like that.

One, two, the timeout is done. And then we pick up on that and we proceed. So maybe we could do something like this. Let's make timer equal to a custom function that will accept our length right here. And then I'll paste this in like so, but we will return this. And then finally set the timeout equal to the length you gave us. Okay, so this is kind of a silly example, but that's okay. It demonstrates how you could use promises for something like this. So let's try it. I want a timer for four seconds, and then I'm going to trigger an alert that just says