jack
/
cocorobolx


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
							<!DOCTYPE html>
<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
  <title>goog.Timer, goog.async.Throttle goog.async.Delay</title>
  <script src="../base.js"></script>

  <script>
    goog.require('goog.async.Delay');
    goog.require('goog.async.Throttle');
    goog.require('goog.Timer');
    goog.require('goog.dom');
  </script>

  <link rel="stylesheet" href="css/demo.css">
  <style>
     .userStatus {
       font-style: italic;
       font-weight: bold;
     }
  </style>
</head>
<body>
  <h1>A Collection of Time Based Utilities</h1>
  <h2>goog.async.Delay</h2>
  <p>An action can be invoked after some delay.</p>
  Delay (seconds): <input size="2" type="text" id="delaySeconds" value="2">
  <button onclick="doDelay()">Start Delay</button>
  <button onclick="doReset()">Restart Delay</button>
  <br />
  Delay Status: <span class="userStatus" id="delayStatus">Not Set</span>

  <h2>goog.async.Throttle</h2>
  A throttle prevents the action from being called more than once per time
  interval.
  <br />
  'Create' the Throttle, then hit the 'Do Throttle' button a lot
  of times. Notice the number of 'Hits' increasing with each button press.
  <br />
  The action will be invoked no more than once per time interval.
  <p>
  Throttle interval (seconds):
  <input size="2" type="text" id="throttleSeconds" value="2">
  <button onclick="doThrottleStart()">Create Throttle</button>
  <button onclick="doThrottle()">Do Throttle</button>
  <br />
  Throttle Hits: <span class="userStatus" id="throttleHits"></span>
  <br />
  Throttle Action Called: <span class="userStatus" id="throttleStatus"></span>
  </p>
  <h2>goog.Timer</h2>
  A timer can be set up to call a timeout function on every 'tick' of the timer.
  <p>
  Timer interval (seconds):
  <input size="2" type="text" id="timerSeconds" value="1">
  <button onclick="doTimerStart()">Start Timer</button>
  <button onclick="doTimerStop()">Stop Timer</button>
  <button onclick="doTimerRestart()">Restart Timer</button>
  <br />
  Timer Status: <span class="userStatus" id="timerStatus">Not Set</span>
  </p>
  <h2>goog.Timer.callOnce</h2>
  Timer also has a useful utility function that can call an action after some
  timeout.
  <br />
  This a shortcut/replacement for window.setTimeout, and has a
  corresponding goog.Timer.clear as well, which stops the action.
  <p>
  Timeout (seconds): <input size="2" type="text" id="doOnceSeconds" value="2">
  <button onclick="doOnce()">Go</button>
  <button onclick="doOnceClear()">Clear</button>
  <br />
  Do Once Status: <span class="userStatus" id="doOnceStatus"></span>
  </p>
  <script>

    /**
     * Get the seconds from a document element.
     * @param {string} id The id of the element
     * @return {number}
     */
    var getSeconds = function (id) {
      var time = Number(goog.dom.getElement(id).value);
      if (isNaN(time)) {
        alert('Please enter a Number');
        return null;
      } else {
        return time;
      }
    };

    /**
     * Convert seconds to ms.
     * @param {number} seconds The time in Seconds
     * @return {number}
     */
    var inMs = function (seconds) {
      return seconds * 1000;
    };

    /**
     * Delay.
     */

    var delay = null;
    var delayStatus = goog.dom.getElement('delayStatus');

    /**
     * Start the delay, on the button press.
     */
    var doDelay = function() {
      if (delay) {
        goog.dom.setTextContent(delayStatus, 'Delay already set.');
        return;
      }

      var seconds = getSeconds('delaySeconds');
      if (!goog.isNumber(seconds)) {
        return;
      }
      delay = new goog.async.Delay(delayedAction, inMs(seconds));
      delay.start();
      goog.dom.setTextContent(delayStatus,
                              'Delay for: ' + seconds + ' seconds.');
    };

    /**
     * Reset the delay.
     */
    var doReset = function(){
      if (!delay) {
        return;
      }
      goog.dom.setTextContent(delayStatus, 'Delay Restarted.');
      delay.start();
    };

    /**
     * Callback, after some delay.
     */
    var delayedAction = function() {
      goog.dom.setTextContent(delayStatus, 'Action called.');
      delay.dispose();
      delay = null;
    };

    /**
     * Throttle.
     */

    var throttle = null;
    var throttleCount = 0;
    var throttleFireCount = 0;
    var throttleHits = goog.dom.getElement('throttleHits');
    var throttleStatus = goog.dom.getElement('throttleStatus');

    /**
     * Start a Throttle.
     */
    var doThrottleStart = function() {
      var seconds = getSeconds('throttleSeconds');
      if (!goog.isNumber(seconds)) {
        return;
      }
      // Get rid of an old one, if it exists.
      if (throttle) {
        throttle.dispose();
        throttleCount = 0;
        throttleFireCount = 0;
      }
      // Create the throttle object for the given time.
      throttle = new goog.async.Throttle(throttleAction, inMs(seconds));
      // Reset the hits and the count.
      goog.dom.setTextContent(throttleHits, throttleFireCount);
      goog.dom.setTextContent(throttleStatus, throttleCount);
    };

    /**
     * Do the throttle action, this can be called as often as desired.
     */
    var doThrottle = function(){
      if (throttle) {
        // Fire the throttle, this will only actually 'fire' no more than
        // once per interval.
        throttle.fire();
        goog.dom.setTextContent(throttleHits, ++throttleFireCount);
      }
    };

    /**
     * Throttle Action Callback.
     */
    var throttleAction = function() {
      goog.dom.setTextContent(throttleStatus, ++throttleCount);
    };

    /**
     * Timer.
     */

    var timer = null;
    var timerStatus = goog.dom.getElement('timerStatus');
    var tickCount = 0;

    /**
     * Start a timer.
     */
    var doTimerStart = function() {
      var seconds = getSeconds('timerSeconds');
      if (!goog.isNumber(seconds)) {
        return;
      }
      if (timer) {
        timer.dispose();
        tickCount = 0;
      }
      // A timer can be created with no callback object,
      // listen for the TICK event.
      timer = new goog.Timer(inMs(seconds));
      timer.start();
      goog.events.listen(timer, goog.Timer.TICK, tickAction);
    };

    /**
     * Stop the Timer.
     */
    var doTimerStop = function() {
      if (timer) {
        timer.stop();
       }
    };

    /**
     * Reset the Timer.
     */
    var doTimerRestart = function() {
      if (timer) {
        timer.start();
      }
    };

    /**
     * Tick callback, called whenever the Timer sends a TICK event.
     */
    var tickAction = function() {
      tickCount++;
      goog.dom.setTextContent(timerStatus, 'Got tick: ' + tickCount);
    };

    var doOnceTimer = null;
    var doOnceStatus = goog.dom.getElement('doOnceStatus');

    /*
     * Do some action once, optional delay.  Can not be restarted, like Delay,
     * only cleared.
     */
    var doOnce = function() {
      if (doOnceTimer) {
        // Timer already set, do not reset it.
        return;
      }
      var seconds = getSeconds('doOnceSeconds');
      if (!goog.isNumber(seconds)) {
        return;
      }
      goog.dom.setTextContent(doOnceStatus, 'Will call action in ' + seconds +
          ' seconds.');
      doOnceTimer = goog.Timer.callOnce(function() {
          goog.dom.setTextContent(doOnceStatus, 'Action called.');
          doOnceTimer = null;
          }, inMs(seconds));
    };

    /*
     * Clear the doOnce, do not do the action.
     */
    var doOnceClear = function() {
      goog.Timer.clear(doOnceTimer);
      doOnceTimer = null;
      goog.dom.setTextContent(doOnceStatus,
                              'Timer cleared, action not called.');
    };

  </script>
</body>
</html>