{"id":400,"date":"2010-01-10T16:55:52","date_gmt":"2010-01-10T21:55:52","guid":{"rendered":"http:\/\/eligrey.com\/blog\/?p=400"},"modified":"2017-04-20T01:35:01","modified_gmt":"2017-04-20T09:35:01","slug":"pausing-javascript-with-async-js","status":"publish","type":"post","link":"https:\/\/eligrey.com\/blog\/pausing-javascript-with-async-js\/","title":{"rendered":"Pausing JavaScript with async.js"},"content":{"rendered":"<p><a href=\"http:\/\/github.com\/eligrey\/async.js\">async.js<\/a> is a library that aims to make it so you don&#8217;t have to mess with callbacks when making applications in\u00a0<a href=\"https:\/\/developer.mozilla.org\/en\/New_in_javascript_1.7\">JavaScript 1.7<\/a> or higher by using the <code>yield<\/code> statement to pause function execution.<\/p>\n<h2>Examples<\/h2>\n<p>Please note that user interaction with the page is not blocked during the course of any of these examples.<\/p>\n<h3>A\u00a0<code>node.next(eventType)<\/code> method<\/h3>\n<p>The\u00a0<code>node.next(eventType)<\/code> method would pause a function until the specified event is fired on the node that\u00a0<code>next<\/code> was called on and would return the captured event object.<\/p>\n<pre lang=\"javascript\">var listenForNextEventDispatch = function ([node, eventType], callback) {\r\n    var listener = function (event) {\r\n        node.removeEventListener(eventType, listener, false);\r\n        callback(event);\r\n    };\r\n    node.addEventListener(eventType, listener, false);\r\n};\r\nNode.prototype.next = function (eventType) {\r\n    return [listenForNextEventDispatch, [this, eventType]];\r\n};<\/pre>\n<p>You could now do the following in an async()ed function to handle the next click event on the document.<\/p>\n<pre lang=\"javascript\">var clickEvent = yield document.next(\"click\");\r\n\/\/ handle click event here<\/pre>\n<h3>Asking the user for their impressions of async.js<\/h3>\n<p>The following code does not use any obtrusive and annoying functions like prompt or alert yet still can utilize execution-blocking features.<\/p>\n<pre lang=\"javascript\">yield to.request(\"feedback\", \"POST\", (\r\n    yield to.prompt(\"What are your impressions of async.js?\")\r\n));\r\nyield to.inform(\"Thanks for your feedback!\");\r\n\/\/ do more stuff here<\/pre>\n<p>As opposed to the following, which is functionally equivalent to the previous code but doesn&#8217;t use async.js&#8217;s blocking features.<\/p>\n<pre lang=\"javascript\">async.prompt(\r\n    [\"What are your impressions of async.js?\"],\r\n    function (response) {\r\n        async.request(\r\n            [\"feedback\", \"POST\", response],\r\n            function () {\r\n                async.inform(\r\n                    [\"Thanks for your feedback!\"],\r\n                    function () {\r\n                        \/\/ do more stuff here\r\n                    }\r\n                );\r\n            }\r\n        );\r\n    }\r\n);<\/pre>\n<p>That&#8217;s a lot of callbacks, all of which are implied when you use async.js.<\/p>\n<h3>Creating an async.js module for\u00a0<code>thatFunctionThatUsesCallbacks<\/code><\/h3>\n<pre lang=\"javascript\">async.yourMethodName = function ([aParameterThatFunctionUses], callback) {\r\n    thatFunctionThatUsesCallbacks(aParameterThatFunctionUses, callback);\r\n};<\/pre>\n<p>You could then use\u00a0<code>yield to.yourMethodName(aParameterThatFunctionUses)<\/code> and immediately start writing code that depends on<code>thatFunctionThatUsesCallbacks<\/code> function after the statement.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>async.js is a library that aims to make it so you don&#8217;t have to mess with callbacks when making applications in\u00a0JavaScript 1.7 or higher by using the yield statement to pause function execution. Examples Please note that user interaction with the page is not blocked during the course of any of these examples. A\u00a0node.next(eventType) method [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[71,90,91],"class_list":["post-400","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-hacks","tag-javascript","tag-javascript-libraries"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pfpUD-6s","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts\/400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/comments?post=400"}],"version-history":[{"count":0,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts\/400\/revisions"}],"wp:attachment":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/media?parent=400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/categories?post=400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/tags?post=400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}