{"id":887,"date":"2019-10-12T01:01:20","date_gmt":"2019-10-12T01:01:20","guid":{"rendered":"http:\/\/www.projectimmerse.com\/blog\/?p=887"},"modified":"2020-06-15T10:04:51","modified_gmt":"2020-06-15T10:04:51","slug":"asynchronous-function-callbacks-using-javascript","status":"publish","type":"post","link":"https:\/\/www.projectimmerse.com\/blog\/asynchronous-function-callbacks-using-javascript\/","title":{"rendered":"Asynchronous Function Callbacks using Javascript"},"content":{"rendered":"\r\n<p>Taking a quick break from System Architecture for a bit, right now I&#8217;m in the mood for some (asynchronous) function callbacks using Javascript. A clear understanding of this will help any javascript developer in understanding the dynamic language we all have grown to wrestle with &#8211; Javascript.<\/p>\r\n\r\n<!--more-->\r\n\r\n<p>I&#8217;m going to dive into a basic example of a function utilizing a function callback.<\/p>\r\n\r\n<h2>Function Callback (example)<\/h2>\r\n\r\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\r\nfunction calc( num, callback ) {\r\n        return callback( num );\r\n}\r\n\r\nvar addTen = function( num ) {\r\n        return num + 10;\r\n}\r\n\r\nvar answer = calc( 3, addTen);\r\n\r\nconsole.log(answer); \r\n\r\n\/\/ Output: \r\n\/\/ 13\r\n\r\n<\/pre>\r\n\r\n<p>Above is a nice basic example of what a function callback would look like. If you used jQuery in your web development, you may have crossed using a callback without even knowing it.<\/p>\r\n\r\n<p>Alright, on to asynchronous callbacks<\/p>\r\n\r\n<h2>Asynchronous<\/h2>\r\n<p>Let&#8217;s first get a basic definition of what asynchronous means. It simply means &#8220;<strong>More than one at at time<\/strong>.&#8221; A more rudimentary explanation of this can be achieved by imagining a chain reaction. When one a function is called, it executes another function while the previous function is still running.<\/p>\r\n\r\n<p>But Javascript fundamentally is <strong>synchronous<\/strong>, <strong>NOT asynchronous<\/strong>. So how is this possible?<\/p>\r\n\r\n<h2>The Javascript Engine<\/h2>\r\n<p>To understand how Javascript is able to do this, we must first understand that Javascript is powered by an Engine of additional components &#8211; most of which we often forget that&#8217;s there. This is often running in the background so it&#8217;s hardly noticeable.<\/p>\r\n\r\n<p>There are other &#8220;engines&#8221; that make up the Javascript Engine as a whole.<\/p>\r\n\r\n<p>\r\n&#8211; Render Engine &#8211; painting<br>\r\n&#8211; HTTPRequest &#8211; getting data<br>\r\n&#8211; Event Queue<br>\r\n<\/p>\r\n\r\n<p>To understand asynchronous callbacks, we need to dive in deeper into the <strong>Event Queue<\/strong>. This is where all events are registered, like a &#8216;click&#8217; event. It is important to understand that the Event Queue isn&#8217;t processed until the execution stack is empty. In other words, only after every function has completed.<\/p>\r\n\r\n<p>So the Javascript Engine creates the illusion that processes are occurring asynchronously, however the only thing that is happening asynchronously are the event handlers being pushed into the event queue for later processing in the order they are received.<\/p>\r\n\r\n<p>Below is a piece of code that emulates a rocket launch along with a function to keep track of its count down.<\/p>\r\n\r\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\r\n        \/\/ function for rocket launch count down\r\n        function rocketTakeOff() {\r\n\r\n                var ms = 5000 + new Date().getTime();\r\n                while (new Date() &lt; ms) {}\r\n\r\n                console.log('finished count down');\r\n\r\n        }\r\n\r\n        function launchRocket() {\r\n                console.log('button pressed for launch');\r\n        }\r\n\r\n        \/\/ listen for the click event\r\n        document.addEventListener('click', launchRocket);\r\n\r\n        rocketTakeOff();\r\n        console.log('finished execution');\r\n\r\n<\/pre>\r\n\r\n<p>So what would you expect from this piece of code? Well when we run the program in the browser and simultaneously start clicking anywhere on the page, we&#8217;ll find that &#8220;button pressed for launch&#8221; will always appear last.<\/p>\r\n\r\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\r\nfinished count down\r\nfinished execution\r\nbutton pressed for launch\r\n\r\n<\/pre>\r\n\r\n<p>So after 5 seconds, the rocketTakeOff() function will fire first and then this line &#8211; console.log(&#8216;finished execution&#8217;).<\/p>\r\n\r\n<p>Any registered event handlers will execute last, only after the execution stack is empty no matter how early you start clicking (anywhere, in this case) on the page.<\/p>\r\n\r\n<p>I think this is an excellent intro in understanding function callbacks and asynchronous ones as well, or how the Javascript Engine creates the illusion that it is asynchronous. Just wanted to cover this concept before I get back to my series in System Architecture. Stay tuned, and keep immersing yourself.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<p><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Taking a quick break from System Architecture for a bit, right now I&#8217;m in the mood for some (asynchronous) function callbacks using Javascript. A clear understanding of this will help any javascript developer in understanding the dynamic language we all have grown to wrestle with &#8211; Javascript.<\/p>\n","protected":false},"author":1,"featured_media":1095,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-887","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Asynchronous Function Callbacks using Javascript - Project Immerse<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.projectimmerse.com\/blog\/asynchronous-function-callbacks-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Asynchronous Function Callbacks using Javascript - Project Immerse\" \/>\n<meta property=\"og:description\" content=\"Taking a quick break from System Architecture for a bit, right now I&#8217;m in the mood for some (asynchronous) function callbacks using Javascript. A clear understanding of this will help any javascript developer in understanding the dynamic language we all have grown to wrestle with &#8211; Javascript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.projectimmerse.com\/blog\/asynchronous-function-callbacks-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Project Immerse\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-12T01:01:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-15T10:04:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/10\/function-call-backs-using-javascript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"projectimmerse\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"projectimmerse\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/asynchronous-function-callbacks-using-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/asynchronous-function-callbacks-using-javascript\\\/\"},\"author\":{\"name\":\"projectimmerse\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#\\\/schema\\\/person\\\/c53f2864be524ee6fa08a7e4800dd1e5\"},\"headline\":\"Asynchronous Function Callbacks using Javascript\",\"datePublished\":\"2019-10-12T01:01:20+00:00\",\"dateModified\":\"2020-06-15T10:04:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/asynchronous-function-callbacks-using-javascript\\\/\"},\"wordCount\":577,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/asynchronous-function-callbacks-using-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/function-call-backs-using-javascript.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/asynchronous-function-callbacks-using-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/asynchronous-function-callbacks-using-javascript\\\/\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/asynchronous-function-callbacks-using-javascript\\\/\",\"name\":\"Asynchronous Function Callbacks using Javascript - Project Immerse\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/asynchronous-function-callbacks-using-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/asynchronous-function-callbacks-using-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/function-call-backs-using-javascript.png\",\"datePublished\":\"2019-10-12T01:01:20+00:00\",\"dateModified\":\"2020-06-15T10:04:51+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#\\\/schema\\\/person\\\/c53f2864be524ee6fa08a7e4800dd1e5\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/asynchronous-function-callbacks-using-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/asynchronous-function-callbacks-using-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/asynchronous-function-callbacks-using-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/function-call-backs-using-javascript.png\",\"contentUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/function-call-backs-using-javascript.png\",\"width\":750,\"height\":750,\"caption\":\"Function Callbacks using PHP\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/asynchronous-function-callbacks-using-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Asynchronous Function Callbacks using Javascript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/\",\"name\":\"Project Immerse\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#\\\/schema\\\/person\\\/c53f2864be524ee6fa08a7e4800dd1e5\",\"name\":\"projectimmerse\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g\",\"caption\":\"projectimmerse\"},\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/author\\\/projectimmerse\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Asynchronous Function Callbacks using Javascript - Project Immerse","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.projectimmerse.com\/blog\/asynchronous-function-callbacks-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Asynchronous Function Callbacks using Javascript - Project Immerse","og_description":"Taking a quick break from System Architecture for a bit, right now I&#8217;m in the mood for some (asynchronous) function callbacks using Javascript. A clear understanding of this will help any javascript developer in understanding the dynamic language we all have grown to wrestle with &#8211; Javascript.","og_url":"https:\/\/www.projectimmerse.com\/blog\/asynchronous-function-callbacks-using-javascript\/","og_site_name":"Project Immerse","article_published_time":"2019-10-12T01:01:20+00:00","article_modified_time":"2020-06-15T10:04:51+00:00","og_image":[{"width":750,"height":750,"url":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/10\/function-call-backs-using-javascript.png","type":"image\/png"}],"author":"projectimmerse","twitter_card":"summary_large_image","twitter_misc":{"Written by":"projectimmerse","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.projectimmerse.com\/blog\/asynchronous-function-callbacks-using-javascript\/#article","isPartOf":{"@id":"https:\/\/www.projectimmerse.com\/blog\/asynchronous-function-callbacks-using-javascript\/"},"author":{"name":"projectimmerse","@id":"https:\/\/www.projectimmerse.com\/blog\/#\/schema\/person\/c53f2864be524ee6fa08a7e4800dd1e5"},"headline":"Asynchronous Function Callbacks using Javascript","datePublished":"2019-10-12T01:01:20+00:00","dateModified":"2020-06-15T10:04:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.projectimmerse.com\/blog\/asynchronous-function-callbacks-using-javascript\/"},"wordCount":577,"commentCount":0,"image":{"@id":"https:\/\/www.projectimmerse.com\/blog\/asynchronous-function-callbacks-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/10\/function-call-backs-using-javascript.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.projectimmerse.com\/blog\/asynchronous-function-callbacks-using-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.projectimmerse.com\/blog\/asynchronous-function-callbacks-using-javascript\/","url":"https:\/\/www.projectimmerse.com\/blog\/asynchronous-function-callbacks-using-javascript\/","name":"Asynchronous Function Callbacks using Javascript - Project Immerse","isPartOf":{"@id":"https:\/\/www.projectimmerse.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.projectimmerse.com\/blog\/asynchronous-function-callbacks-using-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.projectimmerse.com\/blog\/asynchronous-function-callbacks-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/10\/function-call-backs-using-javascript.png","datePublished":"2019-10-12T01:01:20+00:00","dateModified":"2020-06-15T10:04:51+00:00","author":{"@id":"https:\/\/www.projectimmerse.com\/blog\/#\/schema\/person\/c53f2864be524ee6fa08a7e4800dd1e5"},"breadcrumb":{"@id":"https:\/\/www.projectimmerse.com\/blog\/asynchronous-function-callbacks-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.projectimmerse.com\/blog\/asynchronous-function-callbacks-using-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.projectimmerse.com\/blog\/asynchronous-function-callbacks-using-javascript\/#primaryimage","url":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/10\/function-call-backs-using-javascript.png","contentUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/10\/function-call-backs-using-javascript.png","width":750,"height":750,"caption":"Function Callbacks using PHP"},{"@type":"BreadcrumbList","@id":"https:\/\/www.projectimmerse.com\/blog\/asynchronous-function-callbacks-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.projectimmerse.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Asynchronous Function Callbacks using Javascript"}]},{"@type":"WebSite","@id":"https:\/\/www.projectimmerse.com\/blog\/#website","url":"https:\/\/www.projectimmerse.com\/blog\/","name":"Project Immerse","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.projectimmerse.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.projectimmerse.com\/blog\/#\/schema\/person\/c53f2864be524ee6fa08a7e4800dd1e5","name":"projectimmerse","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g","caption":"projectimmerse"},"url":"https:\/\/www.projectimmerse.com\/blog\/author\/projectimmerse\/"}]}},"_links":{"self":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts\/887","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/comments?post=887"}],"version-history":[{"count":13,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts\/887\/revisions"}],"predecessor-version":[{"id":904,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts\/887\/revisions\/904"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/media\/1095"}],"wp:attachment":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/media?parent=887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/categories?post=887"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/tags?post=887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}