Reihenfolge des Codes verdreht.

[Mathias1000]

Wieso wird bei folgendem Code die Reihenfolge der Abarbeitung vertauschst ?
Wieso kommt der dritte erst zum Schluss ?

function LoadShaderneu(file) {

    function loadByteBuffer(file) {

        var reader = new XMLHttpRequest();
        reader.open("GET", file, true); // geht
        reader.responseType = "arraybuffer";

        console.log('ich bin der zweite');

        reader.onload = function () {

            console.log('ich bin der dritte');

            var arrayBuffer = reader.response;
        };
        reader.send(null);
    }

    console.log('ich bin der erste');

    var byteBuffer = loadByteBuffer(file);

    console.log('ich bin der vierte');
}

function initShaders() {
    LoadShaderneu("shader/monoColor.frag");

    console.log("Ich bin der fuenfte");
}


initShaders();

Ausgabe:

ich bin der erste (22:12:30:078)
  at public_html/Shader.js:80
ich bin der zweite (22:12:30:080)
  at public_html/Shader.js:69
ich bin der vierte (22:12:30:083)
  at public_html/Shader.js:84
Ich bin der fuenfte (22:12:30:084)
  at public_html/Shader.js:90
ich bin der dritte (22:12:30:168)

 

[mikdoe]

*verschoben aus JS*

 

[Dormilich]

Wieso kommt der dritte erst zum Schluss ?

asynchrone Verarbeitung.

 

[Mathias1000]

Und wie kann ich das umgehen ?

 

[Dormilich]

warum willst du das umgehen? asynchrone Codeverarbeitung ist so ziemlich das beste was es gibt (nach geschnittenem Brot …)

 

[Mathias1000]

Wie kann ich Daten verarbeiten, bevor sie gelesen werden ?

Ich kann das Brot auch nicht nach dem Essen schneiden.

 

[Dormilich]

Wie kann ich Daten verarbeiten, bevor sie gelesen werden ?

mit Callbacks. die werden dann ausgeführt, wenn die Daten da sind.

 

[Mathias1000]

    console.log('ich bin der erste');

    var byteBuffer = loadByteBuffer(file);

    console.log('ich bin der vierte');

Muss ich da eine while-Schleife einbauen ?
Oder was ähnliches ?

while (Callback) {
    var byteBuffer = loadByteBuffer(file);
}

asynchrone Codeverarbeitung ist so ziemlich das beste was es gibt

Was findest du gut daran ?

 

[Dormilich]

Muss ich da eine while-Schleife einbauen ?

nope, mit Schleifen hat das gar nix zu tun.

Oder was ähnliches ?

console.log('ich bin der erste');

// asynchrone Funktionen haben keinen Rückgabewert!
loadByteBuffer(file, function (buffer) {
    // do something with the buffer
    console.log('ich bin der vierte');
});

dazu muß aber loadByteBuffer() angepaßt werden.

Was findest du gut daran ?

- Funktionale Programmierung
- JS ist (u.a.) eine Event-basierte Sprache, Callbacks brauchst du also ohnehin
- warum CPU-Zeit vergeuden mit warten?

 

[Mathias1000]

Bei loadByteBuffer(fi.... kommt ein Syntax-Fehler.

function LoadShaderneu(file) {

    function loadByteBuffer(file, buffer) {

        var reader = new XMLHttpRequest();
        reader.open("GET", file, true);
        reader.responseType = "arraybuffer";

        console.log('ich bin der zweite');

        reader.onload = function () {

            console.log('ich bin der dritte');

            var arrayBuffer = reader.response;
            buffer = Int8Array(arrayBuffer);
            console.log(ia.length);
        };
        reader.send(null);
    }

    console.log('ich bin der erste');

    var byteBuffer;
    loadByteBuffer(file, function(byteBuffer)); // Syntaxfehler
    console.log('ich bin der vierte');
}

function initShaders() {
    LoadShaderneu("shader/monoColor.frag");

    console.log("Ich bin der fuenfte");
}


initShaders();

 

[mikdoe]

Was soll denn loadByteBuffer(file, function(byteBuffer)); ergeben? byteBuffer ist lediglich eine leere Variable.

 

[tsseh]

Was soll denn loadByteBuffer(file, function(byteBuffer)); ergeben?

ein callback, allerdings fehlt diesem der rumpf, vergleiche

    ...
    loadByteBuffer(file, function(byteBuffer)); // Syntaxfehler
    console.log('ich bin der vierte');
}

vs.

loadByteBuffer(file, function (buffer) {
    // do something with the buffer
    console.log('ich bin der vierte');
});

das hätte man auch selbst drauf kommen können, wenn es da schon einen fehler gibt

byteBuffer ist lediglich eine leere Variable.

die variable byteBuffer ist nutzlos, byteBuffer als funktionsparameter wird ja verwendet

und noch zu #10:
* anstelle von reader.onload würde ich lieber reader.onreadystatechange nutzen, das wird sicher von jedem browser unterstützt.
* der fünfte ist nicht der fünfte, da der 3. und der 4. im callback sind
* function loadByteBuffer(file, buffer) {: buffer ist eine funktion/callback. diese musst du auch aufrufen im onload/onreadystatechange eventhandler

- - - Aktualisiert - - -

ach noch was, ich weiss nicht, ob du der mit der promise-fage gewesen bist, wenn ja, nutze promise, wenn nein, vielleicht wäre das was für dich.
ich nutze Q wobei es da auch performance-befürchtungen bei einigen gibt. aber im gegensatz zu den es6-specs unterstützt Q auch die CommonJS-spec mit progress/notify callbacks, was bei zyklischen aufgaben ganz praktisch ist

function LoadShaderneu(file) {
    
  function loadByteBuffer(file) {
        var deferred = Q.defer();
        var reader = new XMLHttpRequest();
        reader.open("GET", file, true); // geht
        reader.responseType = "arraybuffer";

        console.log('ich bin der zweite');

        reader.onload = function () {

            console.log('ich bin der dritte');

            var arrayBuffer = reader.response;
            deferred.resolve(arrayBuffer);
        };
        reader.send(null);
        return deferred.promise;
    }

    console.log('ich bin der erste');

    return loadByteBuffer(file).then(function(arrayBuffer)
    {
       console.log('ich bin der vierte');
       return arrayBuffer;
    });
}

function initShaders() {
    LoadShaderneu("shader/monoColor.frag").then(function(arrayBuffer)
    {
       console.log("Ich bin der fuenfte");
    }););
}


initShaders();

 

[Mathias1000]

Danke erst mal für den Code, aber leider geht es immer noch nicht.

var deferred = Q.defer();

Q is not defined

Ich hätte nicht gedacht, das bei Javascript Daten einzulesen so kompliziert ist. :icon8:

 

[tsseh]

https://github.com/kriskowal/q

 

[Mathias1000]

Kann das wirklich sein, das ich eine Bibliothek mit 2051 Zeilen installieren muss, nur um eine Datei einzulesen ?

Gibt es keine einfachere Lösung für mein Problem ?

 

[Dormilich]

Kann das wirklich sein, das ich eine Bibliothek mit 2051 Zeilen installieren muss, nur um eine Datei einzulesen ?

müssen mußt du gar nichts. Es kann sich aber durchaus lohnen diese 2K Zeilen zu laden.

wenn dein Browser ES6-Promises unterstützt, kannst du natürlich deine Promises auch damit schreiben.

alternativ, wenn dir Promises nicht zusagen, nimm die reine Callback-Variante.

 

[Mathias1000]

Vielleicht sollte ich mal erwähnen, das ich in JS ein blutiger Anfänger bin, welcher eine WebGL-Animation schreibt.

Das einzige was ich will, ist eine einfache Function etwa so:

byteBuffer = Dateneinlesen('xxx.dat');

Unter normalen Java sieht dies so aus:

	static void Eingabe() throws IOException {
		FileInputStream fileInputStream = new FileInputStream("test.dat");
		for (int i = 0; i < 64; i++) {
			int b = fileInputStream.read();
			System.out.println(b);
		}
		fileInputStream.close();
	}

 

[tsseh]

Das einzige was ich will, ist eine einfache Function etwa so:

byteBuffer = Dateneinlesen('xxx.dat');

Unter normalen Java sieht dies so aus:

das einzige was du willst, ist eine datei vom server zu laden, in js sieht das so aus:

var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET', 'test.txt', true);
xmlHttp.onreadystatechange = function ()
{
  if (xmlHttp.readyState == 4)
  {
    alert(xmlHttp.responseText);
  }
};
xmlHttp.send(null);
}

 

[Dormilich]

das einzige was du willst, ist eine datei vom server zu laden, in js sieht das so aus:

und die Datenverarbeitung geschieht dann dort, wo in dem Beispiel alert(xmlHttp.responseText); steht.

 

[Mathias1000]

das einzige was du willst, ist eine datei vom server zu laden, in js sieht das so aus:

Dann ich wieder das gleiche Problem wie am Anfang.

Und ich kann das Brot nicht essen, bevor es geschnitten ist.