<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Plugins | jQuery Plugins</title>
		<link rel="shortcut icon" href="http://static.jquery.com/favicon.ico" type="image/x-icon"/>
		<link rel="stylesheet" href="http://static.jquery.com/files/rocker/css/reset.css" type="text/css" />

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" media="all">@import "/files/css/700b4d1251b2dfd435b3437ca8105b90.css";</style>
    <script type="text/javascript" src="/misc/jquery.js"></script>
<script type="text/javascript" src="/misc/drupal.js"></script>
<script type="text/javascript" src="/sites/all/modules/jquery_update/compat-1.0.js"></script>
<script type="text/javascript" src="/themes/jquery/external-links.js"></script>
<script type="text/javascript" src="/sites/all/modules/jrating/js/form.js"></script>
<script type="text/javascript" src="/sites/all/modules/jrating/js/rating.js"></script>
<script type="text/javascript" src="/sites/all/modules/jquery_update/collapse-fix.js"></script>
<script type="text/javascript">Drupal.extend({ settings: { "googleanalytics": { "trackOutgoing": 1, "trackMailto": 1, "trackDownload": 1, "trackDownloadExtensions": "7z|aac|avi|csv|doc|exe|flv|gif|gz|jpe?g|js|mp(3|4|e?g)|mov|pdf|phps|png|ppt|rar|sit|tar|torrent|txt|wma|wmv|xls|xml|zip", "LegacyVersion": 1 } } });</script>
<script type="text/javascript">function rating_postsubmit(nid){return true;}</script>

		<link rel="stylesheet" href="http://static.jquery.com/files/rocker/css/screen.css" type="text/css" />
		
		<script type="text/javascript" src="http://static.jquery.com/files/rocker/scripts/custom.js"></script>
  </head>

  <body id="jq-interior" class="sidebar-left">

	<div id="jq-siteContain">
			<div id="jq-header">
				<a id="jq-siteLogo" href="http://jquery.com/" title="jQuery Home"><img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" width="215" height="53" alt="jQuery: Write Less, Do More." /></a>

				<div id="jq-primaryNavigation">

					<ul>
						<li class="jq-jquery"><a href="http://jquery.com/" title="jQuery Home">jQuery</a></li>
						<li class="jq-plugins jq-current"><a href="http://plugins.jquery.com/" title="jQuery Plugins">Plugins</a></li>
						<li class="jq-ui"><a href="http://ui.jquery.com/" title="jQuery UI">UI</a></li>
						<li class="jq-blog"><a href="http://jquery.com/blog/" title="jQuery Blog">Blog</a></li>

						<li class="jq-about"><a href="http://docs.jquery.com/About" title="About jQuery">About</a></li>

						<li class="jq-donate"><a href="http://docs.jquery.com/Donate" title="Donate to jQuery">Donate</a></li>
					</ul>
				</div><!-- /#primaryNavigation -->

				<div id="jq-secondaryNavigation">
					<ul>
<li class="jq-popularPlugins jq-first"><a href="/most_popular">Popular Plugins</a></li>
<li class="jq-latestReleases"><a href="/latest_releases">Latest Releases</a></li>
<li class="jq-browseCategories"><a href="/project/Plugins" class="active">Browse Categories</a></li>
<li class="jq-allPlugins jq-last"><a href="/project/Plugins/name">All Plugins</a></li>
					</ul>
				</div><!-- /#secondaryNavigation -->


				<h1>Plugins</h1>

				<form id="jq-primarySearchForm" action="/search/node"  accept-charset="UTF-8" method="post">

					<div>
						<input type="hidden" value="1" name="ns0"/>
						<label for="primarySearch">Search <span class="jq-jquery">Plugins</span></label>
						<input type="text" value="" accesskey="f" title="Search jQuery" name="search_block_form_keys" id="jq-primarySearch"/>
						<button type="submit" name="go" id="jq-searchGoButton"><span>Go</span></button>
						<input type="hidden" name="form_id" id="edit-search-block-form" value="search_block_form"  />
						<input type="hidden" name="search_type_mode" value="all" />

					</div>

				</form>
			</div><!-- /#header -->

			<div id="jq-content" class="jq-clearfix">

				<div id="jq-interiorNavigation">
              <div id="block-search-0" class="clear-block block block-search">

  <h5>Search</h5>

  <div class="content jq-pBody"><form action="/project/timers"  accept-charset="UTF-8" method="post" id="search-block-form">
<div><div class="container-inline"><div class="form-item" id="edit-search-type-mode-wrapper">
 <label for="edit-search-type-mode">Search for: </label>
 <select name="search_type_mode" class="form-select" id="edit-search-type-mode" ><option value="user">Users</option><optgroup label="Content"><option value="project_issue">Issue</option><option value="project_project" selected="selected">Plugin</option><option value="project_release">Plugin Release</option><option value="all">All content</option></optgroup></select>
</div>
<div class="form-item" id="edit-search-block-form-keys-wrapper">
 <input type="text" maxlength="128" name="search_block_form_keys" id="edit-search-block-form-keys"  size="15" value="" title="Enter the terms you wish to search for." class="form-text" />
</div>
<input type="submit" name="op" id="edit-submit" value="Search"  class="form-submit" />
<input type="hidden" name="form_id" id="edit-search-block-form" value="search_block_form"  />
</div>
</div></form>
</div>
</div>
<div id="block-user-0" class="clear-block block block-user">

  <h5>User login</h5>

  <div class="content jq-pBody"><a href="/user/login?destination=node%2F3656">Login/Register</a></div>
</div>
<div id="block-menu-112" class="clear-block block block-menu">

  <h5>Browse Plugins</h5>

  <div class="content jq-pBody">
<ul class="menu">
<li class="leaf"><a href="/project/Plugins/name">All Plugins</a></li>
<li class="leaf"><a href="/latest_releases">Latest Releases</a></li>
<li class="leaf"><a href="/most_popular">Most Popular</a></li>
<li class="leaf"><a href="/project/Plugins/category/47">Ajax</a></li>
<li class="leaf"><a href="/project/Plugins/category/48">Animation and Effects</a></li>
<li class="leaf"><a href="/project/Plugins/category/49">Browser Tweaks</a></li>
<li class="leaf"><a href="/project/Plugins/category/53">Data</a></li>
<li class="leaf"><a href="/project/Plugins/category/55">DOM</a></li>
<li class="leaf"><a href="/project/Plugins/category/45">Drag-and-Drop</a></li>
<li class="leaf"><a href="/project/Plugins/category/46">Events</a></li>
<li class="leaf"><a href="/project/Plugins/category/20">Forms</a></li>
<li class="leaf"><a href="/project/Plugins/category/42">Integration</a></li>
<li class="leaf"><a href="/project/Plugins/category/56">JavaScript</a></li>
<li class="leaf"><a href="/project/Plugins/category/28">jQuery Extensions</a></li>
<li class="leaf"><a href="/project/Plugins/category/51">Layout</a></li>
<li class="leaf"><a href="/project/Plugins/category/52">Media</a></li>
<li class="leaf"><a href="/project/Plugins/category/44">Menus</a></li>
<li class="leaf"><a href="/project/Plugins/category/22">Navigation</a></li>
<li class="leaf"><a href="/project/Plugins/category/54">Tables</a></li>
<li class="leaf"><a href="/project/Plugins/category/21">User Interface</a></li>
<li class="leaf"><a href="/project/Plugins/category/57">Utilities</a></li>
<li class="leaf"><a href="/project/Plugins/category/50">Widgets</a></li>
<li class="leaf"><a href="/project/Plugins/category/43">Windows and Overlays</a></li>

</ul>
</div>
</div>
<div id="block-block-1" class="clear-block block block-block">

  <h5>Can&#039;t find a Plugin?</h5>

  <div class="content jq-pBody"><p>Can't find a Plugin you are looking for?  Check out the <a href="http://docs.jquery.com/Plugins" rel="nofollow">jQuery Wiki</a> page.</p>
<p>Are you a plugin developer?  Please move your plugin over to this site.</p>
</div>
</div>
<div id="block-block-2" class="clear-block block block-block">

  <h5>Website Bug or Feature Request?</h5>

  <div class="content jq-pBody"><p>Found a bug on the new jQuery Plugin website? Have a feature request? </p>
<p>Submit it to the jQuery Plugin website <a href="/project/jquerypluginswebsite" rel="nofollow">issue queue</a> to ensure it is noticed!</p>
</div>
</div>
      					
				</div><!-- /#interiorNavigation -->




				<div id="jq-primaryContent">

	<div id="content">

<!-- Layout -->
  <!--<div id="header-region" class="clear-block"></div>-->

    <div id="wrapper">
    <div id="container" class="clear-block">

      <div id="header">
        <div id="logo-floater">
        <h1><a href="/" title="jQuery Plugins"><span>jQuery Plugins</span></a></h1><br style="clear:left;"/>        </div>

                  <ul class="links primary-links"><li  class="first last menu-1-1-2"><a href="/project/Plugins" class="menu-1-1-2">Plugins</a></li>
</ul>                
      </div> <!-- /header -->

          <div class="breadcrumb"><a href="/">Home</a> › <a href="/project" title="Browse projects">Downloads</a> › <a href="/project/Plugins">Plugins</a></div>          <!---->

                    <h2>jQuery Timers</h2><br style="clear:left;"/>          
          
                              
<div id="node-3656" class="node">



      <span class="submitted">August 22, 2008 - 4:24pm — <a href="/user/191" title="View user profile.">blair</a></span>
  
  <div class="content">
    <div class="rating-item"><div class="rating" id="rating-mean-3656"><div class="rating-intro"><span class="rating-intro-text">Average rating</span></div><div class="rating-stars" id="rating-mean-stars-3656"><div class="star avg on"><a style="width: 100%;" onclick="return false;">&nbsp;</a></div>
<div class="star avg on"><a style="width: 100%;" onclick="return false;">&nbsp;</a></div>
<div class="star avg on"><a style="width: 100%;" onclick="return false;">&nbsp;</a></div>
<div class="star avg on"><a style="width: 100%;" onclick="return false;">&nbsp;</a></div>
<div class="star avg"><a style="width: 100%;" onclick="return false;">&nbsp;</a></div></div><div class="num-votes">(<span id="rating-num-votes-3656">10</span> votes)</div></div><div class="rating"><div class="rating-intro" id="rating-intro-3656"></div></div></div><p>jQuery Timers is a high level abstraction of setTimeout and setInterval. It links into the jQuery chain so you can apply timers to elements directly in your code, leading to much more intuitive timer-based code. It also adds numerous advanced features such as labelling of timers and abstracted timer ids.</p>
<h2>Features</h2>
<h3>Abstracted Timing</h3>
<p>Saving the timer id when calling setTimeout and setInterval is annoying a troublesome if you need to cancel the timer at some other point in the code. You either have to pass it around as a parameter everywhere, or use a global variable. Timers creates a global cache of timer ids much like jQuery's events system creates a global cache of events.</p>
<h4>Example</h4>
<p>
<div class="codeblock"><code>$(&quot;#close-button&quot;).click(function() {<br />&nbsp; $(this).oneTime(1000, function() {<br />&nbsp;&nbsp;&nbsp; $(this).parent(&quot;.main-window&quot;).hide();<br />&nbsp; });<br />});<br />$(&quot;#cancel-button&quot;).click(function() {<br />&nbsp; $(&quot;#close-button&quot;).stopTime();<br />});</code></div>
</p>
<p></p>
<h3>Timing Labels</h3>
<p>Because jQuery timers connects timers to elements, it is advantageous to allow for a filtration of timers prior to cancelling, in case some other section of code is using jQuery timers for a different feature. Labels serve this purpose by allowing the programmer to assign a specific event a specific label. Labels are also automatically generated based on the timeout value of the timer if no specific label is generated. This means, you can cancel all timers originally set to activate 1000 ms later. This is merely a shortcut for programmers who prefer convention and implicit rules.</p>
<h4>Example</h4>
<p>
<div class="codeblock"><code>$(&quot;#close-button&quot;).click(function() {<br />&nbsp; $(this).oneTime(1000, &quot;hide&quot;, function() {<br />&nbsp;&nbsp;&nbsp; $(this).parent(&quot;.main-window&quot;).hide();<br />&nbsp; });<br />});<br />$(&quot;#cancel-button&quot;).click(function() {<br />&nbsp; $(&quot;#close-button&quot;).stopTime(&quot;hide&quot;);<br />});</code></div>
</p>
<p></p>
<h3>Limited Timers</h3>
<p>Limited Timers are a natural extension of the basic setTimeout/setInterval pair. Rather than limiting the programmer to one event or an unending chain of events, jQuery timers allows you to specify a specific number of times for the event to occur. This may be useful for pseudo-asynchronous looping and other time-related events.</p>
<h4>Example</h4>
<p>
<div class="codeblock"><code>var times = chunks.length;<br />$(document).everyTime(1000, function(i) {<br />&nbsp; processChunk(i);<br />}, times);</code></div>
</p>
<p></p>
<h3>String Time Parsing</h3>
<p>By default, setTimeout and setInterval take a millisecond count, but as human we tend to think in seconds. So if a string is provided as the interval/timeout in jQuery timers it will be parsed for standard time prefixes. So "2s" means 2 seconds, "250ms" means 250 milliseconds and so forth. The list of supported prefixes is larger than should ever be used.</p>
<h2>Methods added to the jQuery chain</h2>
<h3>everyTime(interval : Integer | String, [label = interval : String], fn : Function, [times = 0 : Integer])</h3>
<p>everyTime will add the defined function (<code>fn</code>) as a timed event to run at a given time interval (<code>interval</code>) for a given number of times (<code>times</code>). If times is set to 0, the number of times the method is called is unbounded. A label is also set for the given timed event either to the provided string (<code>label</code>) or to the string representation of the interval provided. Additionally, the interval can be defined by using a string such as "3s" for 3 seconds.</p>
<h3>oneTime(interval : Integer | String, [label = interval : String], fn : Function)</h3>
<p>oneTime will call the defined function (<code>fn</code>) a certain amount of time (<code>interval</code>) after being added to the elements in the jQuery object. A label (label) is also set for the timed event either to the provided string (<code>label</code>) or to the string representation of the interval provided.</p>
<h3>stopTime([label : Integer | String], [fn : Function])</h3>
<p>stopTime will stop any timed events with the provided label (<code>label</code>) and function (<code>fn</code>). If neither is specified, it will stop all timed events acting on the elements in the jQuery object. If only the function is provided, then it will stop all timed events calling that function regardless of label. Finally if only the label is provided, it will stop all timed events given that label at initialization.</p>
<h3>Releases</h3><table class="releases">
 <thead><tr><th class="release-title">Official releases</th><th class="release-date">Date</th><th class="release-size">Size</th><th class="release-links">Links</th><th class="release-status" colspan="2">Status</th> </tr></thead>
<tbody>
 <tr class="release ok odd"><td class="release-title"><a href="/node/10837">1.2.0</a></td><td class="release-date">2009-Oct-16</td><td class="release-size">3.26 KB</td><td class="release-links"><ul class="links"><li  class="first project_release_download"><a href="http://plugins.jquery.com/files/jquery.timers-1.2.js.txt" class="project_release_download">Download</a></li>
<li  class="last project_release_notes"><a href="/node/10837" class="project_release_notes">Release notes</a></li>
</ul></td><td class="release-reason">Recommended for <em>1.0.x</em></td><td class="release-icon"><img src="/misc/watchdog-ok.png" alt="This is currently the recommended release for 1.0.x." title="This is currently the recommended release for 1.0.x." width="17" height="17" /></td> </tr>
</tbody>
</table>
<div class="item-list"><ul><li><a href="/node/3656/release">View all releases</a></li></ul></div><div class="item-list"><h3>Resources</h3><ul><li><a href="http://jquery.offput.ca/timers">Home page</a></li><li><a href="http://jquery.offput.ca/timers">Read documentation</a></li><li><a href="http://sam.zoy.org/wtfpl">Read license</a></li><li><a href="http://jquery.offput.ca/timers">Try out a demonstration</a></li></ul></div><div class="item-list"><h3>Support</h3><ul><li><a href="/project/issues/timers?categories=support&amp;states=all">View all support requests</a></li><li><a href="/project/issues/timers?categories=support">View pending support requests</a></li><li><a href="/project/issues/timers?categories=bug">View pending bug reports</a></li><li><a href="/project/issues/timers?categories=feature">View pending feature requests</a></li><li><a href="/user/login?destination=node/add/project-issue/timers">Login</a> or <a href="/user/register?destination=node/add/project-issue/timers">register</a> to create an issue</li></ul></div><div class="item-list"><h3>Development</h3><ul><li><a href="/project/issues/timers?states=8,13,14">View pending patches</a></li><li><a href="/project/issues/timers?categories=task">View available tasks</a></li><li><a href="/project/issues/timers">View all pending issues</a></li></ul></div>  </div>

  <div class="clear-block clear">
    <div class="meta">
          <div class="terms"><ul class="links inline"><li  class="first taxonomy_term_1267"><a href="/taxonomy/term/1267" rel="tag" title="" class="taxonomy_term_1267">1.3.x</a></li>
<li  class="taxonomy_term_49"><a href="/project/Plugins/category/49" rel="tag" title="IE PNG Fix, IE Iframe hack, CSS and layout fixes." class="taxonomy_term_49">Browser Tweaks</a></li>
<li  class="taxonomy_term_46"><a href="/project/Plugins/category/46" rel="tag" title="Keyboard navigation, advanced hovering, new events." class="taxonomy_term_46">Events</a></li>
<li  class="taxonomy_term_56"><a href="/project/Plugins/category/56" rel="tag" title="Array extras, String extras, Object-Oriented Code." class="taxonomy_term_56">JavaScript</a></li>
<li  class="taxonomy_term_28"><a href="/project/Plugins/category/28" rel="tag" title="Changes how jQuery works. New selectors, advanced methods, old version compatibility." class="taxonomy_term_28">jQuery Extensions</a></li>
<li  class="taxonomy_term_38"><a href="/project/Plugins" rel="tag" title="" class="taxonomy_term_38">Plugins</a></li>
<li  class="last taxonomy_term_57"><a href="/project/Plugins/category/57" rel="tag" title="Debugging, Consoles, Variable Inspection." class="taxonomy_term_57">Utilities</a></li>
</ul></div>
        </div>

      </div>

</div>          <span class="clear"></span>

    </div> <!-- /container -->


<!-- /layout -->

<noscript><style type="text/css">form.rating{ display: block; }</style></noscript><script type="text/javascript" src="/files/googleanalytics/urchin.js"></script>
<script type="text/javascript" src="/sites/all/modules/google_analytics/googleanalytics.js"></script>
<script type="text/javascript">_uacct = "UA-1076265-1";urchinTracker();</script>

				</div><!-- /#primaryContent -->

				
				
				
			</div></div></div><!-- /#content -->


			<div id="jq-footer" class="jq-clearfix">

				<div id="jq-credits">
					<p id="jq-copyright">&copy; 2009 <a href="http://ejohn.org/">John Resig</a> and the <a href="http://docs.jquery.com/Contributors">jQuery Team</a>.</p>
					<p id="jq-hosting">Hosting provided by <a href="http://mediatemple.net/" class="jq-mediaTemple">Media Temple</a></p>

				</div>

				<div id="jq-footerNavigation">
					<ul>
<li class="jq-first"><a href="/most_popular">Popular Plugins</a></li>

<li class=""><a href="/latest_releases">Latest Releases</a></li>
<li class=""><a href="/project/Plugins" class="active">Browse Categories</a></li>
<li class="jq-last"><a href="/project/Plugins/name">All Plugins</a></li>
					</ul>
				</div><!-- /#secondaryNavigation -->
				
			</div><!-- /#footer -->


	</div><!-- /#siteContain -->
	
	<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
	<script type="text/javascript">_uacct="UA-1076265-1";urchinTracker();</script>
	</body>
</html>
