83 lines
3.8 KiB
HTML
83 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>The source code</title>
|
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
|
<style type="text/css">
|
|
.highlight { display: block; background-color: #ddd; }
|
|
</style>
|
|
<script type="text/javascript">
|
|
function highlight() {
|
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="prettyPrint(); highlight();">
|
|
<pre class="prettyprint lang-js"><span id='Ext-util-DelayedTask-method-constructor'><span id='Ext-util-DelayedTask'>/**
|
|
</span></span> * @class Ext.util.DelayedTask
|
|
* <p> The DelayedTask class provides a convenient way to "buffer" the execution of a method,
|
|
* performing setTimeout where a new timeout cancels the old timeout. When called, the
|
|
* task will wait the specified time period before executing. If durng that time period,
|
|
* the task is called again, the original call will be cancelled. This continues so that
|
|
* the function is only called a single time for each iteration.</p>
|
|
* <p>This method is especially useful for things like detecting whether a user has finished
|
|
* typing in a text field. An example would be performing validation on a keypress. You can
|
|
* use this class to buffer the keypress events for a certain number of milliseconds, and
|
|
* perform only if they stop for that amount of time. Usage:</p><pre><code>
|
|
var task = new Ext.util.DelayedTask(function(){
|
|
alert(Ext.getDom('myInputField').value.length);
|
|
});
|
|
// Wait 500ms before calling our function. If the user presses another key
|
|
// during that 500ms, it will be cancelled and we'll wait another 500ms.
|
|
Ext.get('myInputField').on('keypress', function(){
|
|
task.{@link #delay}(500);
|
|
});
|
|
* </code></pre>
|
|
* <p>Note that we are using a DelayedTask here to illustrate a point. The configuration
|
|
* option <tt>buffer</tt> for {@link Ext.util.Observable#addListener addListener/on} will
|
|
* also setup a delayed task for you to buffer events.</p>
|
|
* @constructor The parameters to this constructor serve as defaults and are not required.
|
|
* @param {Function} fn (optional) The default function to call.
|
|
* @param {Object} scope (optional) The default scope (The <code><b>this</b></code> reference) in which the
|
|
* function is called. If not specified, <code>this</code> will refer to the browser window.
|
|
* @param {Array} args (optional) The default Array of arguments.
|
|
*/
|
|
Ext.util.DelayedTask = function(fn, scope, args){
|
|
var me = this,
|
|
id,
|
|
call = function(){
|
|
clearInterval(id);
|
|
id = null;
|
|
fn.apply(scope, args || []);
|
|
};
|
|
|
|
<span id='Ext-util-DelayedTask-method-delay'> /**
|
|
</span> * Cancels any pending timeout and queues a new one
|
|
* @param {Number} delay The milliseconds to delay
|
|
* @param {Function} newFn (optional) Overrides function passed to constructor
|
|
* @param {Object} newScope (optional) Overrides scope passed to constructor. Remember that if no scope
|
|
* is specified, <code>this</code> will refer to the browser window.
|
|
* @param {Array} newArgs (optional) Overrides args passed to constructor
|
|
*/
|
|
me.delay = function(delay, newFn, newScope, newArgs){
|
|
me.cancel();
|
|
fn = newFn || fn;
|
|
scope = newScope || scope;
|
|
args = newArgs || args;
|
|
id = setInterval(call, delay);
|
|
};
|
|
|
|
<span id='Ext-util-DelayedTask-method-cancel'> /**
|
|
</span> * Cancel the last queued timeout
|
|
*/
|
|
me.cancel = function(){
|
|
if(id){
|
|
clearInterval(id);
|
|
id = null;
|
|
}
|
|
};
|
|
};</pre>
|
|
</body>
|
|
</html>
|