Asynchronous vs. Synchronous Code
By: Charles Tillmon

Asynchronous vs. Synchronous Code

JavaScript is a single threaded, synchronous programming language. This means when code is executed by the JavaScript engine the current task must be completed before the engine can move on to the next task. For most code the wait time isn’t noticeable but for larger functions this becomes an issue. The issue that arises is that while the code is waiting for completion, no other actions can be taken. For example, if you submit information for a contact form on a site you would have to wait for a response from the server. If the server takes 3 minutes to respond (or more likely timeout); the web page in that time would be unresponsive. Sure, you can click a button, but nothing will happen until the response from the server is received for the current task. Imagine being at the bank and there is only one receptionist. Everyone would be in a single file line and your place in line determines when you would taken care of. This is exactly how synchronous blocking languages work.

More recently the use of asynchronous code has helped relieve this issue. Asynchronous code allows all tasks to be executed at the same time, but the current task doesn’t hinder the completion of other tasks. However, as we stated JavaScript is single-threaded, so the asynchronous code is a product of the host in which it is implemented and not JavaScript itself. In the above example where we submitted the data via a contact form, asynchronous code would allow us to interact with the page because the response coming back from the server would not hinder other tasks. Now clicking the button would perform exactly as expected.

Understanding the difference between these two types of code will allow you to properly implement them in projects. While it may be tempting to use asynchronous code in every situation; this can lead to some undesired results. Some code is dependent on the other code being executed first and, in these situations, a synchronous style would be preferred. Therefore, we believe a foundational understanding of a language is key to optimizing the outputs. 

要查看或添加评论,请登录

Charles Tillmon的更多文章

  • CSS: Normal Document Flow

    CSS: Normal Document Flow

    As we focus more on understanding the styling layer of web pages it is only natural that we discuss the normal document…

  • Async & Await Keywords

    Async & Await Keywords

    When ES2017 was released along with it came the async and await keywords. These keywords were developed to make working…

  • JavaScript Promises

    JavaScript Promises

    Typically, with asynchronous code you will see the use of callback functions, which are functions that are passed as…

  • TCP/IP Overview

    TCP/IP Overview

    Have you ever wondered how data is transmitted between computers? Well just like us they must establish a common…

  • The Internet vs. The Web

    The Internet vs. The Web

    Have you ever used the Internet and the Web interchangeably? This is a common mistake that many have made, me included.…

  • Core Front-End Components Overview

    Core Front-End Components Overview

    Have you ever wondered how web pages get on the web? When it comes to basic web pages, typically they consist of 3 core…

  • Is Modernizing Your Business Worth The Investment?

    Is Modernizing Your Business Worth The Investment?

    “The day that you plant the seed is not the day that you eat the fruit”. This is a mantra that can apply to life, but…

  • JavaScript Basics-Functions: Part 4

    JavaScript Basics-Functions: Part 4

    JavaScript functions are blocks of code that either perform a task or return a value. These blocks of code are executed…

  • JavaScript Basics-Loops: Part 5

    JavaScript Basics-Loops: Part 5

    Loops in JavaScript are a way to repeat the same set of actions a set number of times or until a condition is met…

  • JavaScript Basics-Conditional Statements: Part 3

    JavaScript Basics-Conditional Statements: Part 3

    Sometimes in programming languages the code needs to make a decision on what actions to take dependent upon the…

社区洞察

其他会员也浏览了