Matroids Matheplanet Forum Index
Moderiert von matroid
Informatik » Algorithmen / Datenstrukturen » HTML/javascript: Text anzeigen vor onload()
Autor
Universität/Hochschule J HTML/javascript: Text anzeigen vor onload()
algol
Junior Letzter Besuch: in der letzten Woche
Dabei seit: 19.03.2008
Mitteilungen: 19
Wohnort: Schweiz
  Themenstart: 2021-06-22

Ich habe das folgende «Vier gewinnt»-Spiel programmiert: Vier gewinnt Da 5000 Anfangspositionen aufbereitet werden, dauert es 20 bis 30 Sekunden, bis das Spieltableau erscheint (Firefox, Google Chrome, Microsoft Edge, Internet Explorer). Das HTML ist einfach: \sourceon HTML <BODY> <p id="spiel"></p> </BODY> \sourceoff Wenn das Spieltableau aufbereitet ist, wird es geladen: \sourceon Javascript document.getElementById("spiel").innerHTML = t_startmap; \sourceoff Ich möchte in der Zwischenzeit aber einen Text anzeigen, wie «17% geladen», d.h. nach je 50 Positionen den Prozentsatz erhöhen. Und erst am Schluss das Spieltableau anzeigen (wie jetzt auch schon), damit der User nicht zu früh klicken kann! Es passiert aber nichts, bevor das Spieltableau erscheint, d.h., bevor onload() aktiv ist. Wie muss ich vorgehen? Das ganze Programm (8300 Zeilen html + javascript, wovon Zeile 1640 bis 8080 die Anfangspositionen sind) sieht man z.B. im Firefox mit Rechtsklick und «Seitenquelltext anzeigen». Welcher Code-Teil interessiert hier?


   Profil
Triceratops
Aktiv Letzter Besuch: in der letzten Woche
Dabei seit: 28.04.2016
Mitteilungen: 5768
Wohnort: Berlin
  Beitrag No.1, eingetragen 2021-06-22

\quoteon(2021-06-22 21:06 - algol im Themenstart) Welcher Code-Teil interessiert hier? \quoteoff Ich denke, es wäre deine Aufgabe, den relevanten Teil zu erkennen und hier reinzukopieren. Dein Code hat 8000 Zeilen, ist nicht kommentiert und nicht modular aufgebaut (alles eine große Datei), sodass es für Außenstehende schwer ist, einen Überblick zu bekommen. Auch "onload" ist im Code nicht zu finden. Für das, was du vorhast, gibt es jedenfalls vom Prinzip her eine ganz einfache Methode (zumindest mit Vanilla JS, mit Frameworks ginge es eleganter). Du legst zwei sections im HTML an (der p-Tag ist semantisch unpassend), der eine für die Ladezeit und der andere für das Spiel. Der Abschnitt mit dem Spiel ist anfangs nicht sichtbar (css: display = none, siehe hier), der Abschnitt mit der Ladezeit aber schon. Wenn die Berechnung fertig ist, dreht man die Sichtbarkeit um (css: display = block). Und während der Berechnung schreibt man die Ladezeit (ladezeit.innerText = ...). Ich empfehle, das erst einmal in einem vom Spiel losgelösten Minimalbeispiel zu programmieren.


   Profil
algol
Junior Letzter Besuch: in der letzten Woche
Dabei seit: 19.03.2008
Mitteilungen: 19
Wohnort: Schweiz
  Beitrag No.2, vom Themenstarter, eingetragen 2021-06-23

Vielen Dank, Triceratops, für die Hinweise! Ich werde mich da hinein knien und melden, wenn ok.


   Profil
algol
Junior Letzter Besuch: in der letzten Woche
Dabei seit: 19.03.2008
Mitteilungen: 19
Wohnort: Schweiz
  Beitrag No.3, vom Themenstarter, eingetragen 2021-06-24

«Vier gewinnt» hat 7 Kolonnen (A...G) und 6 Zeilen (1...6). Die Zellen werden wie im Schach mit A1 bis G6 bezeichnet. Bevor das Spiel starten kann, speichere ich sehr viele mögliche Kombinationen der 42 Zellen mit dem Fortsetzungszug in einem internen Array. Während des Spiels werden dann höchstens zwei Züge voraus gerechnet. Wenn dies nicht zwingend zu einem Sieg eines Partners führt, wird ein look-up im Array benutzt, was äusserst schnell ist. Andere Programme rechnen dagegen sekunden- oder minutenlang, bis sie den optimalen Zug gefunden haben.

\sourceon HTML, Javascript

\sourceoff Zuerst wird ca. 20 Sekunden lang «0% bereit» angezeigt, dann gelöscht und durch das Spielpanel ersetzt. Woran liegt es, dass getElementById("percent").innerHTML im Loop nicht funktioniert?



   Profil
Wally
Senior Letzter Besuch: in der letzten Woche
Dabei seit: 02.11.2004
Mitteilungen: 9275
Wohnort: Dortmund, Old Europe
  Beitrag No.4, eingetragen 2021-06-24

\(\begingroup\)\(\newcommand{\D}{\displaystyle}\) Hallo algol, woher soll die Variable $pcent denn wissen, wieviele Prozent bereits geladen sind, wenn du es ihr nicht sagst und dann die Anzeige aktualisierst? Viele Grüße Wally \(\endgroup\)


   Profil
algol
Junior Letzter Besuch: in der letzten Woche
Dabei seit: 19.03.2008
Mitteilungen: 19
Wohnort: Schweiz
  Beitrag No.5, vom Themenstarter, eingetragen 2021-06-24

Hallo Wally Mit ... zeige ich an, dass etwas im Loop läuft. Mit console.log(_dollar_pcent + "%"); //ok (eine Zeile tiefer als .innerHTML) sehe ich im Log, dass alles von 0% bis 100% bestens abläuft, d.h. $pcent += 5; funktioniert wie gewünscht! Ich wollte nicht zuviele Details aufführen. Sorry. Gruss, algol


   Profil
algol
Junior Letzter Besuch: in der letzten Woche
Dabei seit: 19.03.2008
Mitteilungen: 19
Wohnort: Schweiz
  Beitrag No.6, vom Themenstarter, eingetragen 2021-06-25

Komisch, wenn ich nach document.getElementById("percent").innerHTML = $pcent + "% bereit"; ein alert(…); einfüge, dann funktioniert es, und die wechselnden % werden angezeigt. Es dauert ja ein paar 100 ms, bis ich ok klicke. Also müsste ich eine Funktion (welche?) aufrufen, um dem HTML Zeit zu geben, den Bildschirm zu refreshen. Ich habe es probiert mit \sourceon Javascript function sleep(milliseconds) { const date = Date.now(); let currentDate = null; do { currentDate = Date.now(); } while (currentDate - date < milliseconds); } \sourceoff aber selbst sleep(1000); nützt nichts.


   Profil
Scynja
Aktiv Letzter Besuch: in der letzten Woche
Dabei seit: 23.02.2011
Mitteilungen: 430
Wohnort: Deutschland
  Beitrag No.7, eingetragen 2021-06-25

Hallo algol, Du solltest die Berechnung in asynchronen Schritten durchführen: \sourceon JavaScript setTimeout(()=>doSomething(ersterTeil), 0) doSomething = aten => { berechne aten-Teil schreibe die Prozentzahl setTimeout(()=>doSomething(zweiterTeil), 0) } \sourceoff usw. das kann man dann noch schön verpacken und es sollte funktionieren.


   Profil
algol
Junior Letzter Besuch: in der letzten Woche
Dabei seit: 19.03.2008
Mitteilungen: 19
Wohnort: Schweiz
  Beitrag No.8, vom Themenstarter, eingetragen 2021-06-28

Hallo Triceratops und Scynja Mein ursprüngliches Problem (20—30 s warten, bis Tableau erscheint) hat sich völlig überraschend gelöst, nachdem ich zwei
eingebaut habe und die Antwortzüge für die diversen Anfangspositionen nicht mehr im Hauptstream, sondern in einer function() in einen array einfülle. Die % werden zwar auch mit setTimeout() nicht angezeigt, aber das ist gar nicht mehr nötig, weil es nur noch ca. 4 s dauert, bis der User sein Spiel beginnen kann! Und das ist völlig erträglich. Ich zeige also den Ladezustand (0% bis 100%) gar nicht an. Vielen Dank für eure Tipps! Vielleicht wären jetzt die beiden
auch nicht mehr nötig, aber wegen dieser paar Millisekunden mag ich nicht mehr pröbeln und schrauben. Dank Scynjas Beitrag habe ich herausgefunden, wie ich den Code mit «Quelltext» anzeigen kann und habe das überall angepasst. So ist alles leichter lesbar. Der Titel des Themas («vor onload()») stimmt jetzt auch nicht mehr, aber ich weiss nicht, wie ändern. Viele Grüsse, algol


   Profil
algol hat die Antworten auf ihre/seine Frage gesehen.
algol hat selbst das Ok-Häkchen gesetzt.
algol wird per Mail über neue Antworten informiert.

Wechsel in ein anderes Forum:
 Suchen    
 
All logos and trademarks in this site are property of their respective owner. The comments are property of their posters, all the rest © 2001-2021 by Matroids Matheplanet
This web site was originally made with PHP-Nuke, a former web portal system written in PHP that seems no longer to be maintained nor supported. PHP-Nuke is Free Software released under the GNU/GPL license.
Ich distanziere mich von rechtswidrigen oder anstößigen Inhalten, die sich trotz aufmerksamer Prüfung hinter hier verwendeten Links verbergen mögen.
Lesen Sie die Nutzungsbedingungen, die Distanzierung, die Datenschutzerklärung und das Impressum.
[Seitenanfang]