Adding mapbox-gl branch
This commit is contained in:
Andreas Hocevar
@@ -0,0 +1,291 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user