textarea in innerHTML -> verzögerung

[manfred fölklo]

Hallo,

ich habe eine textarea. Mit JavaScript wird bei onkeyup unter einer Verzögerung (setTimeout) der aktuelle Wert der textarea ausgelesen und in ein html-Element geschrieben. (Anschließend wird die Seite dann noch neu mit MathJax gerendert, um eventuell neue Formeln anzuzeigen.)

Das ganze passiert jetzt mit einer Verzögerung von einer Sekunde. Allerdings passiert es für jeden Tasten-"loslasser" einmal und verursacht so eine Sekunde nach dem ersten Tasten-loslasser eine starke Unruhe durch ändern des div-Inhalts und rendern der MathJax-Formeln.

Wie könnte man es denn besser handhaben?

Ich überlege gerade es irgendwie so hinzubekommen, dass die div-Inhalte nur aktualisiert und neu gerendert werden, wenn nach einem Tastendruck lange genug nichts passiert ist, also eine gewisse Zeit nichts, getippt wurde. Hat jemand eine Idee, wie man das umsetzen könnte?

Grüße

[ChrisB]

Hi,

Ich überlege gerade es irgendwie so hinzubekommen, dass die div-Inhalte nur aktualisiert und neu gerendert werden, wenn nach einem Tastendruck lange genug nichts passiert ist, also eine gewisse Zeit nichts, getippt wurde. Hat jemand eine Idee, wie man das umsetzen könnte?

Timeouts kann man auch wieder clearen.

Wenn also der aktuelle Tastendruck einen noch auf der "Warteliste" stehenden Timeout findet, cleart er diesen zunächst, bevor er anschließend seinen eigenen setzt.

MfG ChrisB

[manfred fölklo]

Danke für den Hinweis.

Ich habe jetzt eine textarea mit onkeyup="updater", wobei die updater-Funktion wie folgt aussieht:

function updater() {
            window.clearTimeout(timeout);
            timeout = window.setTimeout('updateOutput(this.value)', 1000);
        }

Leider wird dennoch andauernd wieder updateOutput ausgeführt.

Grüße

[JürgenB]

Hallo manfred,

Leider wird dennoch andauernd wieder updateOutput ausgeführt.

wenn "andauernd wieder" jede Sekunde (1000 ms) ist, ist das nicht verwunderlich. Setz mal den Timeout auf länger.

Gruß, Jürgen

[manfred fölklo]

Nein ich meine nicht jede Sekunde.

Wenn ich anfange zu tippen, sollte doch theoretisch der timeout immer wieder gelöscht werden, bis ichschließlich mindestens eine sekunde nicht tippe, erst dann sollte updateOutput aufgerufen werden.

Wo mache ich den Fehler?

[manfred fölklo]

In der textarea wird onkeyup="updater" aufgerufen.

Diese Funktion soll einen timeout setzen. Das macht sie bei jedem Tastendruck. Nun soll aber bei jedem Tastendruck der alte Timeout gelöscht werden und ein neuer gesetzt werden, sodass also während einer zügigen Eingabe kein Update des div-Inhalts stattfindet. Nur wenn man das tippen für 3 Sekunden unterbricht, soll der div-Inhalt aktualisiert werden.

Ich habe dafür folgendes JavaScript funktion versucht:

function updater() {
            window.clearTimeout(tim);
            tim = window.setTimeout('updateOutput(this.value)', 3000);
        }

Allerding wird 3 Sekunden nach dem ersten Tastendruck ständig wieder updateOutput ausgeführt, es scheint also nicht so, dass der alte timeout gelöscht wurde.

Grüße

[manfred fölklo]

Also ich habe jetzt ein minimal arbeitendes Beispiel:

<script>
        function updater() {
//             clearTimeout(tim);
            tim = setTimeout('updateOutput(this.value)', 1000);
        }
</script>

Wenn ich nun in das Textfeld eingebe, wird updateOutput erst eine Sekunde nach dem Tastenanschlag ausgeführt. Allerdings wird es für jeden Tastendruck erneut ausgeführt.

Deswegen wollte ich mit clearTimeout jedes mal den alten Timeout löschen, um immer nur einen aktiven Timeout zu haben, der dann ausgeführt wird, wenn eine Sekunde lang nicht getippt wird.

Wenn ich nun aber die Zeile mit dem clearTimeout wie oben auskommentiere und verwende, dann wird updateOuput seltsamerweise garnicht mehr ausgeführt..

Hat mir jemand eine Idee?

Grüße