Others
Symmetric intervals
This is an example managing symmetric intervals:
<!DOCTYPE html>
<html>
<head>
<!-- This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="canonical" href="https://crossbrowdy.com/examples/others/symmetric_intervals/try" />
<title>Others: Symmetric intervals - Example</title>
<!-- Loads the needed CSS files: -->
<link rel="stylesheet" type="text/css" href="main.css" />
<!-- Loads CrossBrowdy.js (main file): -->
<!-- Note: it is recommended to download CrossBrowdy instead of hotlinking the online version. This is just for the example! -->
<script src="https://crossbrowdy.com/CrossBrowdy/CrossBrowdy.js" type="text/javascript" language="javascript"></script><!-- "type" and "language" parameters for legacy clients. -->
<!-- Loads the other needed script files: -->
<script src="main.js" type="text/javascript" language="javascript"></script>
</head>
<body>
The values may vary during time. Average times are calculated with the last time values (10 maximum). Wait as much as you want...
<br />
<br />
requestAnimationFrame (could have been polyfilled automatically by CrossBrowdy):
<br />
<span id="raf">
Minimum time: <span id="raf_min_time"></span><br />
Maximum time: <span id="raf_max_time"></span><br />
Average time: <span id="raf_avg_time"></span><br />
</span>
<br />
CB_symmetricCall at 0 ms:
<br />
<span id="sym0">
Minimum time: <span id="sym0_min_time"></span><br />
Maximum time: <span id="sym0_max_time"></span><br />
Average time: <span id="sym0_avg_time"></span><br />
</span>
<br />
CB_symmetricCall at 1 ms:
<br />
<span id="sym1">
Minimum time: <span id="sym1_min_time"></span><br />
Maximum time: <span id="sym1_max_time"></span><br />
Average time: <span id="sym1_avg_time"></span><br />
</span>
<br />
CB_symmetricCall at 2 ms:
<br />
<span id="sym2">
Minimum time: <span id="sym2_min_time"></span><br />
Maximum time: <span id="sym2_max_time"></span><br />
Average time: <span id="sym2_avg_time"></span><br />
</span>
<br />
CB_symmetricCall at 4 ms:
<br />
<span id="sym4">
Minimum time: <span id="sym4_min_time"></span><br />
Maximum time: <span id="sym4_max_time"></span><br />
Average time: <span id="sym4_avg_time"></span><br />
</span>
<br />
CB_symmetricCall at 8 ms:
<br />
<span id="sym8">
Minimum time: <span id="sym8_min_time"></span><br />
Maximum time: <span id="sym8_max_time"></span><br />
Average time: <span id="sym8_avg_time"></span><br />
</span>
<br />
CB_symmetricCall at 16 ms:
<br />
<span id="sym16">
Minimum time: <span id="sym16_min_time"></span><br />
Maximum time: <span id="sym16_max_time"></span><br />
Average time: <span id="sym16_avg_time"></span><br />
</span>
<br />
CB_symmetricCall at 1000 ms:
<br />
<span id="sym1000">
Minimum time: <span id="sym1000_min_time"></span><br />
Maximum time: <span id="sym1000_max_time"></span><br />
Average time: <span id="sym1000_avg_time"></span><br />
</span>
<br />
Messages:
<div id="messages"></div>
<br />
<!-- The "CB_console" element will be used automatically in the case that the client does not support console: -->
<div id="CB_console" style="display:none; visibility:hidden; overflow:scroll;">
<span style="font-weight:bold;">Console:</span><br />
</div>
<div id="crossbrowdy_info"><a href="https://crossbrowdy.com/examples/others/symmetric_intervals" target="_blank">CrossBrowdy.com example</a></div>
</body>
</html>/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */
body { background-color:#aaddee; word-wrap:break-word; }
#crossbrowdy_info { position:fixed; bottom:2px; right:2px; }
#crossbrowdy_info a { color:#00aadd; }
#crossbrowdy_info a:hover { color:#0033aa; }
span { color:#aa0000; }
#messages { color:#ffffff; background-color:#aa0000; font-weight:bold; width:100%; height:120px; overflow:auto; }/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */
CB_init(start); //It will call the "start" function when ready.
//Stores times information:
var times =
{
"raf": { min: 1000 / 60, max: null, avg: null, timer: null, lastValues: null, lastValuesPointer: 0, lastTimeCalled: 0 },
"sym0": { ms: 0, min: null, max: null, avg: null, timer: null, lastValues: null, lastValuesPointer: 0, lastTimeCalled: 0 },
"sym1": { ms: 1, min: null, max: null, avg: null, timer: null, lastValues: null, lastValuesPointer: 0, lastTimeCalled: 0 },
"sym2": { ms: 2, min: null, max: null, avg: null, timer: null, lastValues: null, lastValuesPointer: 0, lastTimeCalled: 0 },
"sym4": { ms: 4, min: null, max: null, avg: null, timer: null, lastValues: null, lastValuesPointer: 0, lastTimeCalled: 0 },
"sym8": { ms: 8, min: null, max: null, avg: null, timer: null, lastValues: null, lastValuesPointer: 0, lastTimeCalled: 0 },
"sym16": { ms: 16, min: null, max: null, avg: null, timer: null, lastValues: null, lastValuesPointer: 0, lastTimeCalled: 0 },
"sym1000": { ms: 1000, min: null, max: null, avg: null, timer: null, lastValues: [], lastValuesPointer: 0, lastTimeCalled: 0 }
};
//Starts timers (will also be called when CrossBrowdy is ready):
function start()
{
//Clears any previous timers and stored internal data and start timers:
for (var id in times)
{
if (id === "raf") { cancelAnimationFrame(times[id].timer); }
else
{
clearTimeout(times[id].timer);
CB_symmetricCallClear(id); //Clears the stored last time used by 'CB_symmetricCall' for a given symmetric interval identifiers.
}
times[id].min = null;
times[id].max = null;
times[id].lastValues = [];
times[id].lastValuesPointer = 0;
times[id].lastTimeCalled = null;
CB_Elements.insertContentById(id + "_min_time", "Calculating...");
CB_Elements.insertContentById(id + "_max_time", "Calculating...");
printMessage("Starting timer for '" + id + (times[id].ms ? "' using " + times[id].ms + " milliseconds" : "'") + "...");
loop(null, id, times[id].ms);
}
}
//Loop function:
function loop(timeCalled, id, ms)
{
calculateTime(id, timeCalled);
if (id === "raf") { times[id].timer = requestAnimationFrame(function(time) { loop(time, id); }); }
else { times[id].timer = CB_symmetricCall(function(time) { loop(time, id, ms); }, ms, id); } //Similar to 'requestAnimationFrame'.
}
//Calculates and stores times:
function calculateTime(id, timeCalled)
{
if (typeof(timeCalled) === "undefined" || timeCalled === null) { return; }
else if (times[id].lastTimeCalled === null) { times[id].lastTimeCalled = timeCalled; return; }
//Calculate and stores maximum and minimum times:
var timeDifference = timeCalled - times[id].lastTimeCalled;
if (timeDifference < times[id].min || times[id].min === null) { times[id].min = timeDifference; printMessage("Minimum set for '" + id + "': " + timeDifference); }
if (timeDifference > times[id].max || times[id].max === null) { times[id].max = timeDifference; printMessage("Maximum set for '" + id + "': " + timeDifference); }
times[id].lastTimeCalled = timeCalled;
//Stores current time as one of the last values:
times[id].lastValues[times[id].lastValuesPointer] = timeDifference;
times[id].lastValuesPointer++;
times[id].lastValuesPointer %= 10;
//Calculates and stores average:
var timesSum = 0;
for (var x = times[id].lastValues.length - 1; x >= 0; x--)
{
timesSum += times[id].lastValues[x];
}
times[id].avg = timesSum / times[id].lastValues.length;
//Shows the times just calculated:
showTime(id);
}
//Shows times updated:
function showTime(id)
{
CB_Elements.insertContentById(id + "_min_time", times[id].min);
CB_Elements.insertContentById(id + "_max_time", times[id].max);
CB_Elements.insertContentById(id + "_avg_time", times[id].avg);
}
//Shows a message:
function printMessage(message)
{
message = CB_trim(message);
if (message === "") { CB_Elements.insertContentById("messages", ""); }
else { CB_Elements.appendContentById("messages", message + "<br />"); }
CB_Elements.id("messages").scrollTop = CB_Elements.id("messages").scrollHeight; //Scrolls to the bottom.
}You can check the Guides & Tutorials category as well as the API documentation in the case you need more information.
All the examples together can be downloaded here.
