docs/source/DelayedTask.html

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