Examples of Synchronous and Asynchronous Code

Let's have a quick look at some examples of synchronous and 0:00 asynchronous code in JavaScript. 0:03 First, I'll show you an example of the blocking behavior of synchronous code in 0:05 the browser. 0:09 I have this function named wait, consisting of 0:10 a while loop that runs continuously for 8,000 milliseconds or 8 seconds. 0:12 Below the function, there's an EventListener that calls the wait function 0:17 when the red button up here on the page is clicked. 0:20 Notice how in the body of the wait function, the start variable and 0:23 while loop are between a console.log statement that logs the message, starting, 0:27 and one that logs the message, finished. 0:32 Over in the browser, 0:34 let's have a look at what happens when I click the button to call the function. 0:35 In the console, we immediately see the message, starting, 0:38 then it starts to run the while loop, which is quite an intensive chunk of code. 0:42 And eight seconds later we see the message finished logged to the console. 0:45 I'll run the function again, and 0:50 this time notice how the browser freezes until the function finishes executing. 0:51 The sight is unable to process any user interactions. 0:56 For example, I can't type into a text field, click a button, 0:59 even select text on the page. 1:02 All user interactions are blocked by the running program. 1:04 This is what's meant by blocking behavior, 1:07 other parts of the program are blocked from running. 1:10 In this case, the browser is blocked from being able to handle user input and 1:13 perform other tasks until the wait function is completely done 1:18 executing after eight seconds. 1:23 And line seven here cannot start to run until line six has finished. 1:25 Now I'll show you how this operation might run asynchronously. 1:32 JavaScript runtime environments like the browser, 1:35 provide methods that allow it to run code in an asynchronous way. 1:38 You'll learn a whole lot more about this later. 1:41 The setTimeout method, for example, is one of the most basic ways to asynchronously 1:43 schedule code to run after a given amount of time. 1:48 It accepts a callback function that executes a chunk of code at a later 1:51 time specified by the delay value in milliseconds. 1:55 So this time I have a function named carryOn, the first line log starting, and 1:59 right after the console.log, the setTimeout method gets called and 2:03 an anonymous function is passed as its callback. 2:08 Which after 8,000 milliseconds or eight seconds logs finished to the console, and 2:11 the event listener at the bottom calls carryOn when the button is clicked. 2:15 Over in the browser, I'll click the button. 2:19 And notice that while the function runs, I'm able to do other things, 2:22 like type into the text fields, for example. 2:26 SetTimeout returns control to the browser, and after eight seconds, 2:28 finished is logged to the console. 2:33 Next, I'll show you a more real-world example that involves requesting data from 2:35 a server. 2:40 I'm using a testing endpoint from the jsonplaceholder API that returns 5,000 2:40 photo objects. 2:45 So this API call might take some time. 2:46 The time it takes to complete might depend on a variety of factors like the speed 2:48 of the API servers, the users internet connection speed, and so on. 2:52 So when the function getJSON is called, 2:56 it's going to fire off an AJAX request using XMLHttpRequest or 2:58 xhr to retrieve the data which is an array containing all 5,000 photo objects. 3:03 When the data returns, it's going to iterate over it and 3:08 log each object to the console. 3:12 Notice that below the call to get JSON, I have an alert method that 3:14 should display an alert dialogue, with the message, welcome to this page. 3:18 I wrote the data fetching function as a synchronous blocking operation, 3:23 that leaves the program in a waiting state while the data is being requested. 3:26 Using a feature of XHR that's deprecated in all the major browsers due to its 3:30 negative effects to the user experience. 3:35 So I don't recommend doing it this way, well, let's see what happens. 3:37 Over in the browser, when the page loads, 3:40 the getJSON function is called to retrieve the data. 3:43 While the function is running and executing each task, 3:46 like requesting the data, parsing it, and logging it to the console, 3:49 the browser is incapable of doing anything else, it's blocked. 3:52 So there's a pretty significant delay between when the page loads and 3:55 when the alert window pops up. 3:59 Again, there might be other things the browser could be doing, but it can't until 4:01 the server responds with all the data and the getJSON function processes it. 4:05 JavaScript now provides safety nets to prevent making synchronous requests like 4:10 this with features you will learn about in this course. 4:15 Now let's look at the same operation written in a non-blocking asynchronous 4:18 way, like it usually is. 4:23 Over any browser, the page loads, and 4:24 we immediately see the alert box with the message welcome to this page. 4:27 Meanwhile, the function requests the comments from the API and 4:31 eventually logs in to the console once retrieved. 4:34 Click OK, and see them being logged to the console. 4:37 The user is also able to interact with the browser during that time. 4:40 So if you program needs to run tasks that take time, 4:46 we should do our best to run and complete those tasks asynchronously, so 4:49 that other parts of the program can carry on and do what they need to do. 4:54 When working with asynchronous code, 4:58 you might notice that it executes in unexpected ways. 5:00 For example, a function set to execute after set timeout delay expires, 5:03 may not execute exactly after the specified delay value. 5:08 So up next, we'll explore how JavaScript works with the special web API and 5:11 something called the event loop to manage and execute asynchronous tasks 5:16