can

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - can-zone</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" type="text/css" href="./static/bundles/bit-docs-site/static.css"> <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="/docs/images/canjs_favicon.ico"> <link rel="apple-touch-icon" sizes="57x57" href="../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="../docs/images/canjs_favicon_72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="../docs/images/canjs_favicon_114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="../docs/images/canjs_favicon_128x128.png"> <link rel="apple-touch-icon" sizes="144x144" href="../docs/images/canjs_favicon_144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="../docs/images/canjs_favicon_152x152.png"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2302003-11', 'auto'); ga('send', 'pageview'); </script> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger"/> <label for="nav-trigger">Menu</label> <div id="everything"> <div id="left" class="column"> <div class="top-left"> <div class="brand"> <div class="logo"> <a href="../index.html" alt="CanJS"></a> <div class="dropdown project-dropdown"> <a href="https://donejs.com/">DoneJS</a> <a href="http://stealjs.com/">StealJS</a> <a href="http://jquerypp.com/">jQuery ++</a> <a href="https://funcunit.com/">FuncUnit</a> <a href="http://documentjs.com/">DocumentJS</a> </div> </div> <div class="version"> <div class="version-number"> 3.0.0 </div> <div class="dropdown version-dropdown"> <a href="https://v2.canjs.com">2.3.27</a> </div> </div> </div> <div class="search-bar"> <p>   </p> </div> </div> <div class="bottom-left"> <div class="social-side-container"> <ul class="social-side"> <li> <a class="header-mobile github" href="https://github.com/canjs/canjs" target="_blank"><img class="social-icon-small" src="../docs/images/github.png">Github</a> </li> <li> <a class="header-mobile twitter" href="https://twitter.com/canjs" target="_blank"><img class="social-icon-small" src="../docs/images/twitter.png">Twitter</a> </li> </ul> <ul class="social-side"> <li> <a class="header-mobile" href="https://gitter.im/canjs/canjs" target="_blank">Chat</a> </li> <li> <a class="header-mobile" href="http://forums.donejs.com/c/canjs" target="_blank">Forum</a> </li> </ul> </div> <ul> <li class=" "> <a class="page" href="guides.html" title="Welcome to CanJS! These guides are here to help you develop and improve your relationship with CanJS. After all, picking a JavaScript framework is a commitment. We want CanJS to be the framework you marry. This page helps you know how advance through the different stages of this relationship:"> Guides </a> </li> <li class=" "> <a class="page" href="can-core.html" title="The best, most hardened and generally useful libraries in CanJS."> Core </a> </li> <li class=" parent expanded"> <a class="page" href="can-ecosystem.html" title="Useful libraries that extend or add important features to the core collection."> Ecosystem </a> <ul> <li class=" "> <a class="module" href="can-construct-super.html" title="can.Construct.super is a plugin that makes it easier to call base functions from inside inheriting functions."> can-construct-super </a> </li> <li class=" "> <a class="module" href="can-define-stream.html" title="Define property values using streams. can-stream is used internally to provide the stream functionality."> can-define-stream </a> </li> <li class=" "> <a class="module" href="can-fixture.html" title="can-fixture intercepts an AJAX request and simulates the response with a file or function."> can-fixture </a> </li> <li class=" "> <a class="module" href="can-fixture-socket.html" title="Simulate socket.io services."> can-fixture-socket </a> </li> <li class=" "> <a class="module" href="can-jquery.html" title="Extensions to the event system so that can events and jQuery events are cross-bound. Importing can-jquery will return the jQuery object and wire up the event system. var $ = require("can-jquery"); var div = $("<div>"); div.on("inserted", function(){ // it inserted! }); $("body").append(div);"> can-jquery </a> </li> <li class=" "> <a class="module" href="can-stache-converters.html" title="Provides a set of converters useful for two-way binding with form elements such as <input> and <select>."> can-stache-converters </a> </li> <li class=" "> <a class="module" href="can-stream.html" title="Convert observable values into streams. Kefir is used internally to provide the stream functionality."> can-stream </a> </li> <li class=" "> <a class="module" href="can-vdom.html" title="A browser-lite environment for Node.js or a worker thread."> can-vdom </a> </li> <li class=" "> <a class="module" href="can-view-import.html" title=""> can-view-import </a> </li> <li class="current parent expanded"> <a class="module" href="can-zone.html" title=""> can-zone </a> <ul> <li> <span>types</span> <ul> <li class=" "> <a class="typedef" href="can-zone.ZoneSpec.html" title="A ZoneSpec is the way you tap into the lifecycle hooks of a Zone. The hooks are described below. Using these hooks you can do things like create timers and override global variables that will change the shape of code that runs within the Zone."> ZoneSpec </a> </li> <li class=" "> <a class="typedef" href="can-zone.makeZoneSpec.html" title="A function that returns a can-zone.ZoneSpec object. This can be used any place where a can-zone.ZoneSpec is accepted."> makeZoneSpec </a> </li> </ul> </li> <li> <span>static</span> <ul> <li class=" "> <a class="property" href="can-zone.current.html" title=""> current </a> </li> <li class=" "> <a class="function" href="can-zone.error.html" title=""> error </a> </li> <li class=" "> <a class="function" href="can-zone.ignore.html" title=""> ignore </a> </li> <li class=" "> <a class="function" href="can-zone.waitFor.html" title=""> waitFor </a> </li> </ul> </li> <li> <span>prototype</span> <ul> <li class=" "> <a class="function" href="can-zone.prototype.addWait.html" title=""> addWait </a> </li> <li class=" "> <a class="property" href="can-zone.prototype.data.html" title=""> data </a> </li> <li class=" "> <a class="function" href="can-zone.prototype.removeWait.html" title=""> removeWait </a> </li> <li class=" "> <a class="function" href="can-zone.prototype.run.html" title=""> run </a> </li> </ul> </li> <li> <span>plugins</span> <ul> <li class=" "> <a class="module" href="can-zone/debug.html" title=""> ./debug </a> </li> <li class=" "> <a class="module" href="can-zone/timeout.html" title=""> ./timeout </a> </li> </ul> </li> <li> <span>modules</span> <ul> <li class=" "> <a class="module" href="can-zone/register.html" title="In order to do it's magic, can-zone has to register handlers for all of the common JavaScript async operations. If you have code (or a dependency with this code) that does: var st = setTimeout; And this module loads before can-zone, any time st is used we won't be able to track that within the Zone. To work around this, can-zone/register is used as a script that you run before any other modules. In Node require("can-zone/register"); At the top of your entry-point script. In the Browser You can either add a script tag above all others: <script src="node_modules/can-zone/register.js"></script> Or, if you're using a module loader / bundler, configure it so that can-zone/register is placed above all others in the bundle."> ./register </a> </li> </ul> </li> </ul> </li> <li class=" "> <a class="module" href="steal-stache.html" title="A StealJS extension that allows stache templates as dependencies."> steal-stache </a> </li> </ul> </li> <li class=" "> <a class="page" href="can-infrastructure.html" title="Utility libraries that power the core and ecosystem collection."> Infrastructure </a> </li> <li class=" "> <a class="page" href="can-legacy.html" title="Former libraries that we still accept patches for, but are not under active development."> Legacy </a> </li> </ul> </div> </div> <div id="right" class="column"> <div class="top-right"> <div class="top-right-top"> <ul class="top-right-bitovi"> <li class="dropdown"> <a href="http://bitovi.com" class="bitovi icon-bits">Bitovi</a> <ul class="dropdown-menu"> <li><a href="http://bitovi.com">Bitovi.com</a></li> <li><a href="http://bitovi.com/blog/">Blog</a></li> <li><a href="http://bitovi.com/consulting/">Consulting</a></li> <li><a href="http://bitovi.com/training/">Training</a></li> <li><a href="http://bitovi.com/open-source/">Open Source</a></li> </ul> </li> </ul> <div class="brand"> <div class="logo"> <a href="../index.html" alt="CanJS"></a> </div> </div> <ul class="top-right-links"> <li> <a href="https://gitter.im/canjs/canjs">Chat</a> </li> <li> <a href="http://forums.donejs.com/c/canjs">Forum</a> </li> <li> <a class="github-button nav-social" href="https://github.com/canjs/canjs" data-count-href="/canjs/canjs/stargazers" data-count-api="/repos/canjs/canjs#stargazers_count">Star</a> </li> <li> <a href="https://twitter.com/canjs" class="twitter-follow-button nav-social" data-show-count="true" data-show-screen-name="false">Follow @canjs</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> </li> </ul> </div> <div class="breadcrumb"> <li><a href="../index.html">CanJS</a></li> / <li><a href="can-ecosystem.html">Ecosystem</a></li> / <li><a href="can-zone.html">can-zone</a></li> <li class="breadcrumb-dropdown">/ <a> On this page</a> <ul class="on-this-page"></ul> </li> <div class="nav-toggle" title="Back to top"></div> </div> </div> <div class="bottom-right"> <article> <section class="title"> <div class="page-type"> <h1>can-zone</h1> <div>module</div> </div> <section class="description"> </section> </section> <section class="on-this-page-table"> </section> <section class="title-footer"> <ul class="title-social"> <li> <a class="npm-button" href="https://www.npmjs.com/package/can-zone"> <img src="https://img.shields.io/badge/npm%20package-0.6.0-brightgreen.svg" alt="npm package badge" /> </a> </li> <li> <a class="github-button nav-social" href="https://github.com/canjs/can-zone" data-count-href="/canjs/can-zone/stargazers" data-count-api="/repos/canjs/can-zone#stargazers_count">Star</a> </li> </ul> <ul class="title-links">  <li><a href="//github.com/canjs/can-zone/tree/v0.6.0/docs/can-zone.md">source</a></li>   </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>new Zone()</code> </h2> <p>Creates a new Zone with no additional overrides. Can then call <a href="can-zone.prototype.run.html" title="">zone.run</a> to call a function within the Zone.</p> <pre><code class="language-js">var Zone = require("can-zone"); var zone = new Zone(); zone.run(function(){ return "hello world"; }).then(function(data){ data.result // -> "hello world" }); </code></pre> </div> <div class="signature"> <h2 class="signature-title"> <code>new Zone(zoneSpec)</code> </h2> <p>Create a new Zone using the provided <a href="can-zone.ZoneSpec.html" title="A ZoneSpec is the way you tap into the lifecycle hooks of a Zone. The hooks are described below. Using these hooks you can do things like create timers and override global variables that will change the shape of code that runs within the Zone.">ZoneSpec</a> to configure the Zone. The following examples configures a Zone that will time out after 5 seconds.</p> <pre><code class="language-js">var Zone = require("can-zone"); var timeoutSpec = function(){ var timeoutId; return { created: function(){ timeoutId = setTimeout(function(){ Zone.error(new Error("This took too long!")); }, 5000); }, ended: function(){ clearTimeout(timeoutId); } }; }; var zone = new Zone(timeoutSpec); </code></pre> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>zoneSpec</b> <code>{<a href="can-zone.ZoneSpec.html" title="A ZoneSpec is the way you tap into the lifecycle hooks of a Zone. The hooks are described below. Using these hooks you can do things like create timers and override global variables that will change the shape of code that runs within the Zone.">ZoneSpec</a>|<a href="can-zone.makeZoneSpec.html" title="A function that returns a can-zone.ZoneSpec object. This can be used any place where a can-zone.ZoneSpec is accepted.">makeZoneSpec</a>(<a href="can-zone.prototype.data.html" title="">data</a>)}</code>: <p>A <a href="can-zone.ZoneSpec.html" title="A ZoneSpec is the way you tap into the lifecycle hooks of a Zone. The hooks are described below. Using these hooks you can do things like create timers and override global variables that will change the shape of code that runs within the Zone.">ZoneSpec</a> object or a <a href="can-zone.makeZoneSpec.html" title="A function that returns a can-zone.ZoneSpec object. This can be used any place where a can-zone.ZoneSpec is accepted.">function that returns</a> a ZoneSpec object.</p> <p>These two are equivalent:</p> <pre><code class="language-js">new Zone({ created: function(){ } }); new Zone(function(){ return { created: function(){ } }; }); </code></pre> <p>The latter form is useful so that you have a closure specific to that <a href="can-zone.html" title="">Zone</a>.</p> </li> </ol> </div> </div> <section class="body"> <h2>Use</h2> <p><strong>can-zone</strong> is a library that aids in tracking asynchronous calls in your application. To create a new Zone call it's constructor function with <code>new</code>:</p> <pre><code class="language-js">var zone = new Zone(); </code></pre> <p>This gives you a <a href="can-zone.html" title="">Zone</a> from which you can run code using <a href="can-zone.prototype.run.html" title="">zone.run</a>:</p> <pre><code class="language-js">zone.run(function(){ setTimeout(function(){ }, 500); }) then(function(){ }); </code></pre> <p>The function you provide to <a href="can-zone.prototype.run.html" title="">run</a> will be run within the Zone. This means any calls to asynchronous functions (in this example <code>setTimeout</code>) will be waited on.</p> </section> <script type="text/javascript"> var docObject = {"src":{"path":"node_modules/can-zone/docs/can-zone.md"},"description":"\n","type":"module","title":"","types":[{"type":"function","returns":{"types":[{"type":"undefined"}]},"params":[]}],"name":"can-zone","parent":"can-ecosystem","package":{"_args":[[{"raw":"can-zone@0.6.0","scope":null,"escapedName":"can-zone","name":"can-zone","rawSpec":"0.6.0","spec":"0.6.0","type":"version"},"/Users/kevin/dev/canjs"]],"_from":"can-zone@0.6.0","_id":"can-zone@0.6.0","_inCache":true,"_location":"/can-zone","_nodeVersion":"6.3.1","_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/can-zone-0.6.0.tgz_1477929520105_0.8523777639493346"},"_npmUser":{"name":"matthewp","email":"matthew@matthewphillips.info"},"_npmVersion":"3.10.3","_phantomChildren":{},"_requested":{"raw":"can-zone@0.6.0","scope":null,"escapedName":"can-zone","name":"can-zone","rawSpec":"0.6.0","spec":"0.6.0","type":"version"},"_requiredBy":["/"],"_resolved":"https://registry.npmjs.org/can-zone/-/can-zone-0.6.0.tgz","_shasum":"0b3343710e820f15f07e6154668829287282a543","_shrinkwrap":null,"_spec":"can-zone@0.6.0","_where":"/Users/kevin/dev/canjs","author":{"name":"Bitovi"},"bit-docs":{"dependencies":{"bit-docs-glob-finder":"^0.0.5","bit-docs-dev":"^0.0.3","bit-docs-js":"^0.0.3","bit-docs-generate-readme":"^0.0.8"},"glob":{"pattern":"**/*.{js,md}","ignore":"node_modules/**/*"},"readme":{"apis":"./docs/apis.json"},"parent":"can-view-live"},"bugs":{"url":"https://github.com/canjs/can-zone/issues"},"dependencies":{},"description":"Asynchronous render for all frameworks","devDependencies":{"bit-docs":"0.0.7","chai":"^3.4.1","mocha":"^2.3.4","steal":"^0.16.0","steal-mocha":"1.0.0-pre.1","steal-tools":"^0.16.0","testee":"^0.2.2"},"directories":{},"dist":{"shasum":"0b3343710e820f15f07e6154668829287282a543","tarball":"https://registry.npmjs.org/can-zone/-/can-zone-0.6.0.tgz"},"gitHead":"488d39f7d55752c13348e18e5a9bd98341fe8188","homepage":"https://github.com/canjs/can-zone#readme","keywords":["server-side","rendering","canjs","asynchronous","rendering"],"license":"MIT","main":"lib/zone.js","maintainers":[{"name":"daffl","email":"daff@neyeon.de"},{"name":"justinbmeyer","email":"justin@bitovi.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"}],"name":"can-zone","optionalDependencies":{},"readme":"ERROR: No README data found!","repository":{"type":"git","url":"git+ssh://git@github.com/canjs/can-zone.git"},"scripts":{"build":"node scripts/build.js","document":"bit-docs","postversion":"git push --tags && git checkout master && git branch -D release && git push","preversion":"npm test && npm run build","release:major":"npm version major && npm publish","release:minor":"npm version minor && npm publish","release:patch":"npm version patch && npm publish","release:pre":"npm version prerelease && npm publish","test":"npm run test:node && npm run test:browser","test:browser":"testee test/test.html test/register.html --browsers firefox --reporter Spec","test:node":"mocha test/test.js && mocha test/test_register_node.js","version":"git commit -am \"Update dist for release\" && git checkout -b release && git add -f dist/"},"system":{"npmAlgorithm":"flat","npmDependencies":["steal-mocha","mocha","chai"],"map":{"./assert":"chai/chai"},"meta":{"chai/chai":{"format":"global","exports":"chai.assert"}}},"version":"0.6.0"},"signatures":[{"code":"new Zone()","description":"\n\nCreates a new Zone with no additional overrides. Can then call [can-zone.prototype.run zone.run] to call a function within the Zone.\n\n```js\nvar Zone = require(\"can-zone\");\n\nvar zone = new Zone();\n\nzone.run(function(){\n\n\treturn \"hello world\";\n\n}).then(function(data){\n\tdata.result // -> \"hello world\"\n});\n```\n","params":[]},{"code":"new Zone(zoneSpec)","description":"\n\nCreate a new Zone using the provided [can-zone.ZoneSpec] to configure the Zone. The following examples configures a Zone that will time out after 5 seconds.\n\n```js\nvar Zone = require(\"can-zone\");\n\nvar timeoutSpec = function(){\n\tvar timeoutId;\n\n\treturn {\n\t\tcreated: function(){\n\t\t\ttimeoutId = setTimeout(function(){\n\t\t\t\tZone.error(new Error(\"This took too long!\"));\n\t\t\t}, 5000);\n\t\t},\n\t\tended: function(){\n\t\t\tclearTimeout(timeoutId);\n\t\t}\n\t};\n};\n\nvar zone = new Zone(timeoutSpec);\n```\n","params":[{"types":[{"type":"can-zone.ZoneSpec"},{"type":"can-zone.makeZoneSpec"}],"name":"zoneSpec","description":"A [can-zone.ZoneSpec] object or a [can-zone.makeZoneSpec function that returns] a ZoneSpec object.\n\nThese two are equivalent:\n\n```js\nnew Zone({\n\tcreated: function(){\n\n\t}\n});\n\nnew Zone(function(){\n\treturn {\n\t\tcreated: function(){\n\n\t\t}\n\t};\n});\n```\n\nThe latter form is useful so that you have a closure specific to that [can-zone Zone].\n"}]}],"_curParam":{"types":[{"type":"can-zone.ZoneSpec"},{"type":"can-zone.makeZoneSpec"}],"name":"zoneSpec","description":"A [can-zone.ZoneSpec] object or a [can-zone.makeZoneSpec function that returns] a ZoneSpec object.\n\nThese two are equivalent:\n\n```js\nnew Zone({\n\tcreated: function(){\n\n\t}\n});\n\nnew Zone(function(){\n\treturn {\n\t\tcreated: function(){\n\n\t\t}\n\t};\n});\n```\n\nThe latter form is useful so that you have a closure specific to that [can-zone Zone].\n"},"comment":" ","pathToRoot":".."}; </script> </article> <footer><p>CanJS is part of <a href="http://donejs.com" target="_blank">DoneJS</a>. Created and maintained by the core <a href="https://donejs.com/About.html#section=section_Team" target="_blank">DoneJS team</a> and <a href="http://bitovi.com" target="_blank">Bitovi</a>. <strong>Currently 3.0.0.</strong></p></footer> </div> </div> </div> <script> steal = { instantiated: { "bundles/bit-docs-site/static.css!$css" : null } }; </script> <script type='text/javascript' data-main="bit-docs-site/static" src="./static/node_modules/steal/steal.production.js"></script> <script async defer src="https://buttons.github.io/buttons.js"></script> </body> </html>