Ausgabe eines Arrayelements alle 500ms
Jan K.
- javascript
Hallo zusammen,
ich habe bisher die Sortierfunktion eines meiner Scripte per PHP gelöst, will es aber nun doch lieber dem Client überlassen und möchte es per Javascript realisieren.
Leider habe ich kaum Ahnung von Javascript und fage mich nun ersteinmal wie ich alle 500ms einen Datensatz ausgeben könnte. Dazu habe ich folgendes probiert.
<?php
#......
#......SQLite querys, speicherung aller Datensätze im Array $names
#......
echo'<html>
<head>
<title>Javascript Arrays</title>
<script type="text/javascript">
<!--
';
$i=1;
$anzahl=count($names)-1;
$string="\n";
foreach( $names as $value1) {
if($i==$anzahl+1){$komma="";}else{$komma=",";}
$string=$string.'new Array("'.$value1[nickname].'",'.'"'.$value1[totalherodeath].'",'.'"'.$value1[totalherokills].'",'.'"'.$value1[totalassists]
.'",'.'"'.$value1[totalcreepkills].'",'.'"'.$value1[totaldenies].'",'.'"'.$value1[neutralkills].'")'.$komma."\n";
$i++;
}
echo'var inhalt = new Array('.$string.');';
echo'
-->
</script>
</head>
<body>
';
echo'
<script type="text/javascript">
var zaehler=0;
function ausgabe(){
document.write(inhalt[zaehler]+"<br>");
zaehler++;
//if(zaehler<inhalt.length){ausgabe();}
if(zaehler<inhalt.length){setTimeout("ausgabe()",500);}
}
ausgabe();
</script>
';
echo'
</body>
</html>
';
?>
Sämmtliche Datensätze aufeinmal mit if(zaehler<inhalt.length){ausgabe();}
auszugeben funktioniert, aber der Ansatz es verzögert mit if(zaehler<inhalt.length){setTimeout("ausgabe()",500);}
auszugeben scheitert. Es wird nur ein Datensatz ausgegeben, danach bleibt der Browser beim laden stecken.
Welchen Fehler mache ich hier?
Gruß,
Jan
Guten Morgen.
Verwende window.setTimeout anstelle von setTimeout.
Gruß, LX
Verwende window.setTimeout anstelle von setTimeout.
??? Sinn?
Mathias
Hi,
[code lang=php]
<?php
Du hast ein javascript-Problem. Also ein clientseitiges. Also ist der serverseitige (PHP-)Code vollkommen irrelevant.
Was exakt kommt beim Client an?
function ausgabe(){
document.write(inhalt[zaehler]+"<br>");
zaehler++;
//if(zaehler<inhalt.length){ausgabe();}
if(zaehler<inhalt.length){setTimeout("ausgabe()",500);}
Irgendwann ist das Dokument fertig geladen (das kann schon vor Eintreten des Timeouts sein), wird also geschlossen.
Der nächste document.write sorgt für ein Neuöffnen eines leeren Dokuments, in das dann die Ausgabe geschrieben wird.
In diesem Dokument ist keine Funktion ausgabe() mehr vorhanden ...
In Anbetracht des kleinen Bißchens noch folgenden Codes
</script>
';
echo'
</body>
</html>
';
ist die Wahrscheinlichkeit sehr hoch, daß das bereits vor dem ersten Aufruf geschehen ist.
cu,
Andreas
document.write ist nur in dem kurzen Moment nutzbar, wo das Dokument geladen, geparst wird und alle Scripte ausgeführt werden. Wenn du Timeouts verwendest, brichst du aus dieser Verarbeitung aus und stellt die Ausführung des Scripts hinten an. Dann wird document.write wie gesagt früher oder später aufgerufen, wenn das Dokument bereits fertig geladen ist. Zu dem Zeitpunkt ist document.write unbrauchbar und kontraproduktiv.
Anstatt document.write solltest du einfach das DOM verwenden, um das Dokument zu einem beliebigen Zeitpunkt zu manipulieren. Dazu bietet sich die Erweiterung von http://de.selfhtml.org/javascript/objekte/all.htm#inner_html@title=innerHTML an.
Du suchst also eher etwas wie:
<div id="ausgabe"></div>
<script>
function ausgabe () {
var zähler = 0;
var ausgabeElement = document.getElementById("ausgabe");
var intervallFunktion = function () {
ausgabeElement.innerHTML += inhalt[i];
zähler++;
if (zähler == inhalt.length) {
window.clearInterval(intervallNummer);
}
};
var intervallNummer = window.setInterval(intervallFunktion, 500);
});
</script>
(Wäre natürlich auch mit setTimeout/clearTimeout zu realisieren, das kommt aufs Gleiche heraus.)
Noch besser wäre, direkt alle HTML-Inhalte ins Dokument zu schreiben, sie anfangs mit JavaScript zu verstecken und dann Element für Element wieder sichtbar zu machen. So ist der Inhalt auf jeden Fall zugänglich auch ohne JavaScript.
Mathias