docs/source/DelayedTask.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.2.1
  11  * Copyright(c) 2006-2010 Ext JS, Inc.
  12  * licensing@extjs.com
  13  * http://www.extjs.com/license
  14  */
  15 <div id="cls-Ext.util.DelayedTask"></div>/**
  16  * @class Ext.util.DelayedTask
  17  * <p> The DelayedTask class provides a convenient way to "buffer" the execution of a method,
  18  * performing setTimeout where a new timeout cancels the old timeout. When called, the
  19  * task will wait the specified time period before executing. If durng that time period,
  20  * the task is called again, the original call will be cancelled. This continues so that
  21  * the function is only called a single time for each iteration.</p>
  22  * <p>This method is especially useful for things like detecting whether a user has finished
  23  * typing in a text field. An example would be performing validation on a keypress. You can
  24  * use this class to buffer the keypress events for a certain number of milliseconds, and
  25  * perform only if they stop for that amount of time.  Usage:</p><pre><code>
  26 var task = new Ext.util.DelayedTask(function(){
  27     alert(Ext.getDom('myInputField').value.length);
  28 });
  29 // Wait 500ms before calling our function. If the user presses another key
  30 // during that 500ms, it will be cancelled and we'll wait another 500ms.
  31 Ext.get('myInputField').on('keypress', function(){
  32     task.{@link #delay}(500);
  33 });
  34  * </code></pre>
  35  * <p>Note that we are using a DelayedTask here to illustrate a point. The configuration
  36  * option <tt>buffer</tt> for {@link Ext.util.Observable#addListener addListener/on} will
  37  * also setup a delayed task for you to buffer events.</p>
  38  * @constructor The parameters to this constructor serve as defaults and are not required.
  39  * @param {Function} fn (optional) The default function to call.
  40  * @param {Object} scope The default scope (The <code><b>this</b></code> reference) in which the
  41  * function is called. If not specified, <code>this</code> will refer to the browser window.
  42  * @param {Array} args (optional) The default Array of arguments.
  43  */
  44 Ext.util.DelayedTask = function(fn, scope, args){
  45     var me = this,
  46         id,
  47         call = function(){
  48                 clearInterval(id);
  49                 id = null;
  50                 fn.apply(scope, args || []);
  51             };
  52
  53     <div id="method-Ext.util.DelayedTask-delay"></div>/**
  54      * Cancels any pending timeout and queues a new one
  55      * @param {Number} delay The milliseconds to delay
  56      * @param {Function} newFn (optional) Overrides function passed to constructor
  57      * @param {Object} newScope (optional) Overrides scope passed to constructor. Remember that if no scope
  58      * is specified, <code>this</code> will refer to the browser window.
  59      * @param {Array} newArgs (optional) Overrides args passed to constructor
  60      */
  61     me.delay = function(delay, newFn, newScope, newArgs){
  62         me.cancel();
  63         fn = newFn || fn;
  64         scope = newScope || scope;
  65         args = newArgs || args;
  66         id = setInterval(call, delay);
  67     };
  68
  69     <div id="method-Ext.util.DelayedTask-cancel"></div>/**
  70      * Cancel the last queued timeout
  71      */
  72     me.cancel = function(){
  73         if(id){
  74             clearInterval(id);
  75             id = null;
  76         }
  77     };
  78 };</pre>
  79 </body>
  80 </html>