{"id":2190,"date":"2015-01-29T13:15:23","date_gmt":"2015-01-29T11:15:23","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=2190"},"modified":"2015-01-26T16:05:56","modified_gmt":"2015-01-26T14:05:56","slug":"taming-asynchronous-tasks-in-javascript-with-zone-js","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/","title":{"rendered":"Taming Asynchronous Tasks in JavaScript with Zone.js"},"content":{"rendered":"<p>I recently learned about a new project by the <a href=\"http:\/\/angularjs.org\/\" target=\"_blank\">Angular<\/a> team called <a href=\"https:\/\/github.com\/angular\/zone.js\" target=\"_blank\">Zone<\/a>. This project is one of those rare gems that is only a few lines of code but is so groundbreaking it literally takes time to wrap your mind around it. The easiest way to get started with Zone is to watch the <a href=\"https:\/\/www.youtube.com\/watch?v=3IqtmUscE_U\" target=\"_blank\">excellent talk<\/a> by its creator, Brian Ford. He demos some pretty cool scenarios that are all in the project repository.<\/p>\n<p>In a nutshell, Zone provides what you might consider a \u201cthread execution\u201d context for JavaScript. It basically takes the current \u201ccontext\u201d you are in and intercepts all asynchronous events so they \u201cmap\u201d to the same context. This enables you to do some pretty interesting things such as view stack traces through the original wire-up (i.e. you no longer get \u201cdisconnected\u201d at the point the event was raised) or add tooling. You can use Zone to change the behavior of events (such as implementing your own version of setTimeout) and to keep track of tasks.<\/p>\n<p>Zone works by simply running <em>something<\/em> in the context of the Zone. You can have multiple Zones with their own context. To steal an example from the Zone repo, consider this:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nzone.run(function () {\r\n  zone.inTheZone = true;\r\n\r\n  setTimeout(function () {\r\n    console.log('in the zone: ' + !!zone.inTheZone);\r\n  }, 0);\r\n});\r\n\r\nconsole.log('in the zone: ' + !!zone.inTheZone);\r\n<\/pre>\n<p>Notice that you can set properties and call an asynchronous function and still have access to the properties <em>in the context of the Zone<\/em> but once you fall out you are no longer <em>in the zone<\/em>.<\/p>\n<p>This gives rise to some very intriguing possibilities. As with all frameworks, the only way I knew I could wrap my arms around Zone is by building my own example so I\u2019ll walk you through that and you can understand one of the many \u201cuse cases\u201d for Zone.<\/p>\n<p>I started with the idea of a simple HTML fragment that simply contains a button and an area to hold some data:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n&lt;div&gt;\r\n    &lt;button id=&quot;myBtn&quot;&gt;Populate&lt;\/button&gt;\r\n    &lt;span id=&quot;myData&quot;&gt;Nothing&lt;\/span&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Then I went old school with some JavaScript functions. I attach an event handler to the button and when you click it, it updates the data and sets a timer. The timer fires after 2 seconds and updates the data again. It looks like this:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nvar main = function () {\r\n     var btn = document.getElementById(&quot;myBtn&quot;),\r\n         data = document.getElementById(&quot;myData&quot;);\r\n     btn.addEventListener(&quot;click&quot;, function () {\r\n         data.innerHTML = &quot;Initializing...&quot;;\r\n         setTimeout(function () {\r\n             data.innerHTML = &quot;Done.&quot;;\r\n         }, 2000);\r\n     });\r\n};\r\n<\/pre>\n<p>At this stage you can call the main method and see the app work. Let\u2019s assume you wanted to time how long it is taking to wire things up (maybe you just invented a cool new data-binding framework, for example). How do you keep track of asynchronous events and capture them in the correct order? No worries. Don\u2019t bother with writing that library. Just pull in Zone.<\/p>\n<p>One nice thing about Zone is that you can create a template to intercept actions on the zone. You can store specific variables or functions on the zone, but more importantly you can implement functions that are called when the zone is entered and exited. This happens any time a function is executed in the context of the zone, including asynchronous functions. Borrowing from a performance example in the repo, I created a template for a profiling zone that picks up the best counter available to the browser:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nvar time = 0,\r\n     \/\/ use the high-res timer if available\r\n    timer = performance ?\r\n             performance.now.bind(performance) :\r\n             Date.now.bind(Date);\r\n<\/pre>\n<p>Then I return a zone template. Notice I created my own property called \u201cmarker\u201d that I\u2019m using to tag where I\u2019m at. In the code I showed earlier, I\u2019ll tag the zone by inserting zone.marker = \u201cmain\u201d and zone.marker = \u201cclick\u201d and zone.marker = \u201ctimeout\u201d at the beginning of each function. This will give me some useful information later.<\/p>\n<p>Here is the Zone template that I return:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nreturn {\r\n     marker: &quot;?&quot;,\r\n     onZoneEnter: function () {\r\n         this.originalStart = this.originalStart || timer();\r\n         this.start = timer();\r\n         console.log(&quot;Entered task&quot;);\r\n     },\r\n     onZoneLeave: function () {\r\n         var diff = timer() - this.start,\r\n             totalDiff = timer() - this.originalStart;\r\n         console.log(&quot;Exited task &quot; + zone.marker + &quot; after &quot; + diff);\r\n         time += diff;\r\n         console.log(&quot;Total active time: &quot; + time);\r\n         console.log(&quot;Total elapsed time: &quot; + totalDiff);\r\n     },\r\n     reset: function () {\r\n         time = 0;\r\n     }\r\n};\r\n<\/pre>\n<p>Now all I have to do is wrap things up in Zone. Because the context handles everything within in, there are no modifications to the main method. Zone will handle taking all of the events and marshaling them into my context for me. The only thing I need to do other than pulling in the Zone code itself is to call main like this:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nzone.fork(profilingZone).run(function () {\r\n     zone.reset();\r\n     main();\r\n});\r\n<\/pre>\n<p>This forks a copy based on my template and runs the main function in the context. Now I just run the example, wait a few seconds, and click the button. Here\u2019s what shows up in my console. Note I did not modify my main method except to set the markers. All of the instrumentation was added automatically by the zone. Note total elapsed time is large because I literally ran this and waited as I authored the article before I clicked the button. That\u2019s OK because the zone was able to keep track!\u00a0 The difference between the last two total elapsed times is about 2 seconds or the interval I set on the timeout.<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nEntered task\r\nExited task main after 2.0000000076834112\r\nTotal active time: 2.0000000076834112\r\nTotal elapsed time: 2.0000000076834112\r\nEntered task\r\nExited task click after 2.0000000076834112\r\nTotal active time: 4.0000000153668225\r\nTotal elapsed time: 830135.0000000093\r\nEntered task\r\nExited task timeout after 0\r\nTotal active time: 4.0000000153668225\r\nTotal elapsed time: 832138.0000000063 <\/pre>\n<p>How powerful is that? One common complaint about Angular is the digest loop that is used to scan models and listeners and look for changes in the model. It is required in order to respond to external changes and a special method must be called (apply) when you are mutating the model outside of this loop. Sometimes the loop must fire multiple times in order to be certain side effects are picked up (i.e. a change here causes a change there which means another place must be updated). Zone will enable the Angular team to fire the entire cycle inside a zone context and the team believes that will eliminate the need for digest or apply entirely!<\/p>\n<p>To see this for yourself, check out <a href=\"http:\/\/jsfiddle.net\/jeremylikness\/Yypdf\/\" target=\"_blank\">this fiddle<\/a>. I don\u2019t know of a CDN for Zone yet so I just included the entire source in the fiddle.<\/p>\n<div class=\"attribution\">\n<table>\n<tbody>\n<tr>\n<td><span class=\"reference\">Reference: <\/span><\/td>\n<td><a href=\"http:\/\/csharperimage.jeremylikness.com\/2014\/02\/taming-asynchronous-tasks-in-javascript.html\">Taming Asynchronous Tasks in JavaScript with Zone.js<\/a> from our <a href=\"http:\/\/www.webcodegeeks.com\/wcg\/\">WCG partner<\/a> Jeremy Likness at the <a href=\"http:\/\/csharperimage.jeremylikness.com\/\">C#er : IMage<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>I recently learned about a new project by the Angular team called Zone. This project is one of those rare gems that is only a few lines of code but is so groundbreaking it literally takes time to wrap your mind around it. The easiest way to get started with Zone is to watch the &hellip;<\/p>\n","protected":false},"author":40,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[84],"class_list":["post-2190","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-zone-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Taming Asynchronous Tasks in JavaScript with Zone.js - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"I recently learned about a new project by the Angular team called Zone. This project is one of those rare gems that is only a few lines of code but is so\" \/>\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.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Taming Asynchronous Tasks in JavaScript with Zone.js - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"I recently learned about a new project by the Angular team called Zone. This project is one of those rare gems that is only a few lines of code but is so\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-29T11:15:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Likness\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/jeremylikness\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Likness\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/\"},\"author\":{\"name\":\"Jeremy Likness\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/2cd31c082e3e1cc5f595ba18a6e03a43\"},\"headline\":\"Taming Asynchronous Tasks in JavaScript with Zone.js\",\"datePublished\":\"2015-01-29T11:15:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/\"},\"wordCount\":1160,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"keywords\":[\"Zone.js\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/\",\"name\":\"Taming Asynchronous Tasks in JavaScript with Zone.js - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2015-01-29T11:15:23+00:00\",\"description\":\"I recently learned about a new project by the Angular team called Zone. This project is one of those rare gems that is only a few lines of code but is so\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Taming Asynchronous Tasks in JavaScript with Zone.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/2cd31c082e3e1cc5f595ba18a6e03a43\",\"name\":\"Jeremy Likness\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b4d8ee78925818e3f7a4d0d82df06d34a2b76aa4d260a1f4b67dc0553efbf1b6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b4d8ee78925818e3f7a4d0d82df06d34a2b76aa4d260a1f4b67dc0553efbf1b6?s=96&d=mm&r=g\",\"caption\":\"Jeremy Likness\"},\"description\":\"Jeremy Likness is a principal architect at iVision, Inc. He has been building enterprise applications using the Microsoft stack for 20 years with a focus on web-based solutions for the past 15. A prolific author and speaker, Jeremy's mission is to empower developers to create success in their careers through learning and growth.\",\"sameAs\":[\"http:\/\/csharperimage.jeremylikness.com\/\",\"http:\/\/linkedin.com\/in\/jeremylikness\",\"https:\/\/x.com\/https:\/\/twitter.com\/jeremylikness\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/jeremy-likness\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Taming Asynchronous Tasks in JavaScript with Zone.js - Web Code Geeks - 2026","description":"I recently learned about a new project by the Angular team called Zone. This project is one of those rare gems that is only a few lines of code but is so","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.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/","og_locale":"en_US","og_type":"article","og_title":"Taming Asynchronous Tasks in JavaScript with Zone.js - Web Code Geeks - 2026","og_description":"I recently learned about a new project by the Angular team called Zone. This project is one of those rare gems that is only a few lines of code but is so","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2015-01-29T11:15:23+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Jeremy Likness","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/jeremylikness","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Jeremy Likness","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/"},"author":{"name":"Jeremy Likness","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/2cd31c082e3e1cc5f595ba18a6e03a43"},"headline":"Taming Asynchronous Tasks in JavaScript with Zone.js","datePublished":"2015-01-29T11:15:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/"},"wordCount":1160,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","keywords":["Zone.js"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/","name":"Taming Asynchronous Tasks in JavaScript with Zone.js - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2015-01-29T11:15:23+00:00","description":"I recently learned about a new project by the Angular team called Zone. This project is one of those rare gems that is only a few lines of code but is so","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/taming-asynchronous-tasks-in-javascript-with-zone-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Taming Asynchronous Tasks in JavaScript with Zone.js"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/2cd31c082e3e1cc5f595ba18a6e03a43","name":"Jeremy Likness","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b4d8ee78925818e3f7a4d0d82df06d34a2b76aa4d260a1f4b67dc0553efbf1b6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b4d8ee78925818e3f7a4d0d82df06d34a2b76aa4d260a1f4b67dc0553efbf1b6?s=96&d=mm&r=g","caption":"Jeremy Likness"},"description":"Jeremy Likness is a principal architect at iVision, Inc. He has been building enterprise applications using the Microsoft stack for 20 years with a focus on web-based solutions for the past 15. A prolific author and speaker, Jeremy's mission is to empower developers to create success in their careers through learning and growth.","sameAs":["http:\/\/csharperimage.jeremylikness.com\/","http:\/\/linkedin.com\/in\/jeremylikness","https:\/\/x.com\/https:\/\/twitter.com\/jeremylikness"],"url":"https:\/\/www.webcodegeeks.com\/author\/jeremy-likness\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/2190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=2190"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/2190\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=2190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=2190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=2190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}