can

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - can-zone/timeout</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=" 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="debug.html" title=""> ./debug </a> </li> <li class="current parent expanded"> <a class="module" href="timeout.html" title=""> ./timeout </a> <ul> <li class=" "> <a class="typedef" href="timeout.TimeoutError.html" title="A special type of Error that also includes the number of milliseconds that were waited before timing out. The error object is included with the timeout module: var timeout = require("can-zone/timeout"); var TimeoutError = timeout.TimeoutError; // Maybe use this to check `instanceof`."> TimeoutError </a> </li> </ul> </li> </ul> </li> <li> <span>modules</span> <ul> <li class=" "> <a class="module" href="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><a href="timeout.html">./timeout</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/timeout</h1> <div>module</div> </div> <section class="description"> </section> </section> <section class="on-this-page-table"> </section> <section class="title-footer"> <ul class="title-links">  <li><a href="//github.com/canjs/can-zone/tree/v0.6.0/docs/zones/timeout.md">source</a></li>   </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>timeout(ms)</code> </h2> <p>Creates 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> that you can use as a plugin for your <a href="../can-zone.html" title="">Zone</a> in order to timeout after a certain length of time (as <code>ms</code>).</p> <p>If the Zone times out it's <a href="../can-zone.prototype.run.html" title="">run promise</a> will be rejected with a <a href="timeout.TimeoutError.html" title="A special type of Error that also includes the number of milliseconds that were waited before timing out. The error object is included with the timeout module: var timeout = require("can-zone/timeout");</p> <p>var TimeoutError = timeout.TimeoutError; // Maybe use this to check <code>instanceof</code>.">TimeoutError</a>, a special error that also includes the number of milliseconds waited before timing out.</p> <pre><code class="language-js">var Zone = require("can-zone"); var timeout = require("can-zone/timeout"); var zone = new Zone({ plugins: [ timeout(5000) ] }); zone.run(function(){ setTimeout(function(){ }, 10000); // waiting over 5 sec }) .catch(function(err){ // Called because we exceeded the timeout. }); </code></pre> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>ms</b> <code>{Number}</code>: <p>The number of milliseconds to wait before timing out the <a href="../can-zone.html" title="">Zone</a>.</p> </li> </ol> </div> <div class="returns"> <h3 class="returns-title">Returns</h3> <p> <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>}</code>: <p>A ZoneSpec that can be passed as a plugin.</p> </p> </div> </div> <section class="body"> <h2>Use</h2> <p>The timeout zone allows you to specify a timeout for your Zone. If the Zone promise doesn't resolve before timing out, the Zone promise will be rejected by the plugin.</p> <p>The <strong>timeout</strong> zone is a function that takes a timeout in milliseconds.</p> <p>The Promise will reject with a special type of Error, a <a href="timeout.TimeoutError.html" title="A special type of Error that also includes the number of milliseconds that were waited before timing out. The error object is included with the timeout module: var timeout = require("can-zone/timeout"); var TimeoutError = timeout.TimeoutError; // Maybe use this to check `instanceof`.">TimeoutError</a>.</p> <pre><code class="language-js">var Zone = require("can-zone"); var timeout = require("can-zone/timeout"); var TimeoutError = timeout.TimeoutError; var zone = new Zone({ plugins: [ timeout(2000) ] }); zone.run(function(){ setTimeout(function(){ }, 5000); }).then(null, function(err){ // err.timeout -> 2000 }); </code></pre> </section> <script type="text/javascript"> var docObject = {"src":{"path":"node_modules/can-zone/docs/zones/timeout.md"},"description":"\n","type":"module","title":"can-zone/timeout","types":[{"type":"function","returns":{"types":[{"type":"undefined"}]},"params":[{"types":[{"type":"ms"}]}]}],"name":"can-zone/timeout","parent":"can-zone.plugins","signatures":[{"code":"timeout(ms)","description":"\n\nCreates a [can-zone.ZoneSpec] that you can use as a plugin for your [can-zone Zone] in order to timeout after a certain length of time (as `ms`).\n\nIf the Zone times out it's [can-zone.prototype.run run promise] will be rejected with a [can-zone/timeout.TimeoutError], a special error that also includes the number of milliseconds waited before timing out.\n\n```js\nvar Zone = require(\"can-zone\");\nvar timeout = require(\"can-zone/timeout\");\n\nvar zone = new Zone({\n\tplugins: [ timeout(5000) ]\n});\n\nzone.run(function(){\n\tsetTimeout(function(){\n\n\t}, 10000); // waiting over 5 sec\n})\n.catch(function(err){\n\t// Called because we exceeded the timeout.\n});\n```\n","params":[{"types":[{"type":"Number"}],"name":"ms","description":"The number of milliseconds to wait before timing out the [can-zone Zone].\n"}],"returns":{"types":[{"type":"can-zone.ZoneSpec"}],"description":"A ZoneSpec that can be passed as a plugin.\n"}}],"_curParam":{"types":[{"type":"Number"}],"name":"ms","description":"The number of milliseconds to wait before timing out the [can-zone Zone].\n"},"_curReturn":{"types":[{"type":"can-zone.ZoneSpec"}],"description":"A ZoneSpec that can be passed as a plugin.\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>