Andreas Hocevar
292 lines
7.7 KiB
HTML
292 lines
7.7 KiB
HTML
<!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>
|