Hmja, das mit dem Delay ware eine Option. Ich dachte auch gerade noch an „pragmatische“ Dinge, wie prüfen, ob jemand nur „G“, „L“ oder „_“ (oder vielleicht „0x“) eingetippt hat - wissend, dass dann eigentlich nichts zu tun ist.
Aber ein bißchen rumspielen wollte ich dann doch: Eine Tabelle mit 1800 Einträgen macht natürlich nur bedingt Sinn. Ich dachte, dass man sie vielleicht inkrementell aufbauen könnte, um „responsive“ ( 
) zu bleiben.
Das, was ich da implementiert habe, funktioniert NICHT - aber vielleicht kann jemand (sagen, warum nicht bzw.) einschätzen, ob das Sinn machen könnte, oder in ähnlicher Form funktionieren könnte.
Der Gedanke war, dass man
- Wenn etwas eingetippt wird, ein „update“ schedult.
- Dieses Update hängt z.B. 100 neue Zeilen in die Tabelle (über den DOM)
- Am Ende des updates wird mit setTimeout automatisch das update für die nächsten 100 Zeilen eingereiht
- Wenn man in der Zwischenzeit was tippt, wird das update „interrupted“, und ein neues Update gestartet
Es funktioniert … naja, so halb :rolleyes: Das eigentliche Einfügen geht (man sieht den Scrollbar-Button schrumpfen :D), und das interrupten geht meistens auch, aber nicht immer. Dieser Versuch, das „aktuelle Update“ in einer globalen Variablen namens „currentUpdateCall“ zu speichern, und der dann ggf. so ein „interrupted“ unterzujubeln, damit sie sich selbst (und ihre „rekursiven Aufrufe“) beendet, ist wohl etwas gewagt… (eigentlich dachte ich, dass das recht einfach und klar sein müßte … Multithreading und Race-Conditions sollten ja nicht das Problem sein … 
… aber um die Frage, wo dieses „currentUpdateCall“ denn liegt, wenn man es mit setTimeout startet, muss ich wohl noch meinen Kopf wickeln…)
Aber vielleicht will ja schonmal jemand seine Gedanken dazu äußern?
<!DOCTYPE html>
<html>
<head>
<title>GL Constants Translator</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="scripts/GLConstantsData.js"></script>
<script type="text/javascript" src="scripts/GLConstantsTranslator.js"></script>
<script type="text/javascript">
var currentUpdateCall;
function update() {
if (typeof currentUpdateCall !== "undefined")
{
console.log("Interrupting");
currentUpdateCall.interrupted = true;
}
else
{
console.log("currentUpdateCall is undefined, doing update");
}
doUpdate(this.value);
}
function updateTable(result)
{
interrupted = false;
var output = document.getElementById("output");
output.innerHTML = '';
var table = document.createElement("table");
table.id = "data";
var th0 = document.createElement("th");
th0.className = "long";
th0.appendChild(document.createTextNode("Constant Name"));
table.appendChild(th0);
var th1 = document.createElement("th");
th1.appendChild(document.createTextNode("Decimal"));
table.appendChild(th1);
var th2 = document.createElement("th");
th2.appendChild(document.createTextNode("Hexadecimal"));
table.appendChild(th2);
updateChunk(0, 100, table, result);
output.appendChild(table);
}
function updateChunk(min, size, table, result)
{
var max = min + size;
var finished = false;
if (max > result.length)
{
max = result.length;
finished = true;
}
for (var i=min; i<max; i++)
{
var tr = document.createElement("tr");
if (i % 2 === 0)
{
tr.className = "even";
}
var td0 = document.createElement("td");
var txt0 = document.createTextNode(result**.name);
td0.appendChild(txt0);
tr.appendChild(td0);
var td1 = document.createElement("td");
var txt1 = document.createTextNode(result**.dec);
td1.appendChild(txt1);
tr.appendChild(td1);
var td2 = document.createElement("td");
var txt2 = document.createTextNode(result**.hex);
td2.appendChild(txt2);
tr.appendChild(td2);
table.appendChild(tr);
}
if (!finished)
{
currentUpdateCall = function()
{
console.log("Appending "+min+" size "+size+" of "+result.length);
if (!interrupted)
{
updateChunk(min+size, size, table, result);
}
else
{
currentUpdateCall = undefined;
}
};
console.log("Schedule "+min+" size "+size+" of "+result.length);
setTimeout(currentUpdateCall, 250);
}
else
{
currentUpdateCall = undefined;
}
}
function doUpdate(text) {
console.time("Filter for " + text);
console.time("Translate " + text);
var result = translate(text);
console.timeEnd("Translate " + text);
updateTable(result);
//console.time("Render " + text);
//var renderedResult = renderResult(result);
//console.timeEnd("Render " + text);
//console.time("Update UI " + text);
//document.getElementById("output").innerHTML = renderedResult;
//console.timeEnd("Update UI " + text);
console.timeEnd("Filter for " + text);
}
function init() {
document.getElementsByName("Input")[0].addEventListener('input', update);
document.getElementById("output").innerHTML = renderResult(translate(""));
document.getElementsByName("Input")[0].focus();
}
function renderResult(result) {
if (result && result.length > 0) {
return "<table id='data'><th class='long'>Constant Name</th><th>Decimal</th><th>Hexadecimal</th>" +
result.map(renderRow).join("
") + "</table>";
} else {
return "<p align='center'><b>No matching results</b></p>";
}
}
function renderRow(item, idx) {
var rowclass = (idx % 2 === 0) ? "even" : "odd";
return "<TR class='" + rowclass + "'>" +
"<TD>" + item.name + "</TD>" +
"<TD>" + item.dec + "</TD>" +
"<TD>" + item.hex + "</TD></TR>";
}
</script>
<style>
html {
overflow-y: scroll;
}
table#data {
width: 90%;
margin-left:auto;
margin-right:auto;
font-family:'Courier';
font-size:16px;
}
th td {
width: 15%;
}
th.long {
width: 60%;
}
tr.even {
background-color: #eeeeee;
}
</style>
</head>
<body onload="init()">
<p align="center">
Type GL constant names or values into the input field to filter the table.
</p>
<p align="center">
Constant names may be in upper- or lowercase.
</p>
<p align="center">
Inputs starting with <code><b>"0x"</b></code> will be interpreted as hexadecimal constant values.
</p>
<p align="center">
Other numerical inputs will be interpreted as decimal constant values.
</p>
<table align="center">
<tr>
<td>Filter: </td>
<td>
<input style="font-family:'Courier'; font-size:16px" size="60" type="text" name="Input" />
</td>
</tr>
</table>
<div id="output">
The output
</div>
<a href="https://github.com/javagl/javagl.github.io"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://forum.byte-welt.net/images/ForkMeOrDont.png" alt="Fork me on GitHub"></a>
</body>
</html>
)
