DelayedTask.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  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. <span id='Ext-util-DelayedTask-method-delay'> /**
  63. </span> * Cancels any pending timeout and queues a new one
  64. * @param {Number} delay The milliseconds to delay
  65. * @param {Function} newFn (optional) Overrides function passed to constructor
  66. * @param {Object} newScope (optional) Overrides scope passed to constructor. Remember that if no scope
  67. * is specified, &lt;code&gt;this&lt;/code&gt; will refer to the browser window.
  68. * @param {Array} newArgs (optional) Overrides args passed to constructor
  69. */
  70. this.delay = function(delay, newFn, newScope, newArgs) {
  71. me.cancel();
  72. fn = newFn || fn;
  73. scope = newScope || scope;
  74. args = newArgs || args;
  75. id = setInterval(call, delay);
  76. };
  77. <span id='Ext-util-DelayedTask-method-cancel'> /**
  78. </span> * Cancel the last queued timeout
  79. */
  80. this.cancel = function(){
  81. if (id) {
  82. clearInterval(id);
  83. id = null;
  84. }
  85. };
  86. };</pre>
  87. </body>
  88. </html>