<!DOCTYPE html>
<html>
<!--
Copyright 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 (typeof seconds !== 'number') {
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 (typeof seconds !== 'number') {
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 (typeof seconds !== 'number') {
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 (typeof seconds !== 'number') {
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>
Codebase Browser
chromium