[GELÖST] Teils asynchrone, teils synchrone Ausführung

mikdoe · 19. Nov. 2016

Trotz einiger Recherche und ein paar Versuchen mit div. JS und jQuery Varianten z. B. mit promise oder .done() oder .when() etc. habe ich nirgendwo das raus bekommen was ich haben möchte.

Die Frage ist: Wie kann man die Funktionen a(), b() und c() parallel und ende() erst dann starten, wenn a(), b() und c() fertig sind?

Die Lösung soll so sein, dass an der derzeitigen Syntax der Funktionsaufrufe nichts geändert werden braucht, also auch keine Callback Parameter hinzufügen etc.

Folgender Code:

HTML:

<!DOCTYPE html>
<html>
	<head>
		<title>Test teils asynchrone, teils synchrone Ausführung</title>
		<meta charset="utf-8">
	</head>
	<body>
		<div>
Frage:<br>
------<br>
Wie kann man die Funktionen a(), b() und c() parallel und ende() erst dann starten, wenn a(), b() und c() fertig sind?<br>
<br>
Es soll das ausgegeben werden:<br>
<br>
Funktion B trödelt<br>
Funktion C<br>
Funktion A langsam<br>
Funktion B fertig<br>
Funktionen ENDE<br>
<br>
Danke!<br>
<hr>
		</div>
		<div id="einfuege"></div>
		<script>
			"use strict";
			function a() {
				window.setTimeout(function() {
						document.getElementById('einfuege').innerHTML += 'Funktion A langsam<br>';
					},1000
				);
			}
			function b() {
				document.getElementById('einfuege').innerHTML += 'Funktion B trödelt<br>';
				window.setTimeout(function() {
						document.getElementById('einfuege').innerHTML += 'Funktion B fertig<br>'
					},2000
				);
			}
			function c() {
				document.getElementById('einfuege').innerHTML += 'Funktion C<br>';
			}
			function ende() {
				document.getElementById('einfuege').innerHTML += 'Funktionen ENDE<br>';
			}
			a();
			b();
			c();
			ende();
		</script>
	</body>
</html>

Ein Stichwort würde mir erstmal reichen, dann gurgle ich mal danach.
Danke!

andreax · 19. Nov. 2016

warum kein callback
wenn du b() in a() u c() in b() und ende() in c() inline in der timerfunction aufrufst ginge das

dann brauchst du nur a(); und alles läuft von alleine .

Code:

	<script>
			"use strict";
			function a() {
				window.setTimeout(function() {
						document.getElementById('einfuege').innerHTML += 'Funktion A langsam<br>';b();
					},1000
				);
			}
			function b() {
				document.getElementById('einfuege').innerHTML += 'Funktion B trödelt<br>';
				window.setTimeout(function() {
						document.getElementById('einfuege').innerHTML += 'Funktion B fertig<br>';c();
					},2000
				);
			}
			function c() {
				document.getElementById('einfuege').innerHTML += 'Funktion C<br>';ende();
			}
			function ende() {
				document.getElementById('einfuege').innerHTML += 'Funktionen ENDE<br>';
			}
			a();
		//	b();
		//	c();
		//	ende();
		</script>

mikdoe · 19. Nov. 2016

die sollen ja eben nicht einzeln aufeinander warten sondern möglichst alle gleichzeitig starten.
nur der letzte soll warten bis alle fertig sind, das ist das wichtigste dabei.

tsseh · 19. Nov. 2016

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

kkapsner · 19. Nov. 2016

mikdoe schrieb:
parallel

JS im Browser hat nur einen Thread, also ist seriel - außer du arbeitest mit WebWorkern.

Oder hast du da XHRs/JSONP oder wirklich Timeouts im Spiel? Dann kannst du mit Promises arbeiten.

mikdoe · 19. Nov. 2016

tsseh schrieb:
https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

da steht keine unterstützung des IE. gibt es andere lösungen für alle browser? gern auch jquery.

kkapsner schrieb:
Oder hast du da XHRs/JSONP oder wirklich Timeouts im Spiel? Dann kannst du mit Promises arbeiten.

Nö das war nur als beispiel.

Meine aktuelle anwendung ist, das eine webseite durch viele functions aufgebaut wird. und am ende muss die seite zu einer bestimmten stelle gescrollt werden. deshalb darf der letzte job mit dem scroll kommando erst starten wenn die anderen alle fertig sind.

und außerdem möchte ich das thema synchrone/asynchrone Ausführung lernen. im moment weiß ich nämlich z. b. überhaupt nicht, wie die tatsache mit dem einen thread mit asynchronität zusammen passt. ich würde jetzt erwarten, für die asynchrone ausführung zweier sachen auch zwei threads zu benötigen

tsseh · 19. Nov. 2016

https://github.com/kriskowal/q#combination
https://api.jquery.com/jQuery.when/

- - - Aktualisiert - - -

mikdoe schrieb:
ich würde jetzt erwarten, für die asynchrone ausführung zweier sachen auch zwei threads zu benötigen

ja, der browser hat mehrere threads, in der die asynchronen sachen erledigt werden. die callbacks werden dann wenn sie fertig sin wieder in die q des einen js threads eingetragen

andreax · 19. Nov. 2016

Und wenn du mitzählst bis Zähler gleich Anzahl Funktionen dann ende

Code:

		<script>
			"use strict";

			function a() {
				window.setTimeout(function() {
						document.getElementById('einfuege').innerHTML += 'Funktion A langsam<br>';ende();////
					},1000
				);
			}
			function b() {
				document.getElementById('einfuege').innerHTML += 'Funktion B trödelt<br>';
				window.setTimeout(function() {
						document.getElementById('einfuege').innerHTML += 'Funktion B fertig<br>';ende();/////
					},2000
				);
			}
			function c() {
				document.getElementById('einfuege').innerHTML += 'Funktion C<br>'; ende();/////
			}
			function ende() {
				ende.count = ++ende.count || 1 // ende.count is undefined at first
				if(ende.count === 3){document.getElementById('einfuege').innerHTML += 'Funktionen ENDE<br>';}
			}
	
			a();
			b();
			c();
		</script>

tsseh · 19. Nov. 2016

andreax schrieb:
Und wenn du mitzählst bis Zähler gleich Anzahl Funktionen dann ende

das ist aber nur ne krücke und mit promises nicht mehr nötig

mikdoe schrieb:
Trotz einiger Recherche und ein paar Versuchen mit div. JS und jQuery Varianten z. B. mit promise oder .done() oder .when() etc. habe ich nirgendwo das raus bekommen was ich haben möchte.

ok, when hattest du auch schon

Code:

<script>
			"use strict";
      var d1 = $.Deferred();
      var d2 = $.Deferred(); 
      var d3 = $.Deferred(); 
			function a() {
				window.setTimeout(function() {
						document.getElementById('einfuege').innerHTML += 'Funktion A langsam<br>';
						d1.resolve();
					},1000
				);
			}
			function b() {
				document.getElementById('einfuege').innerHTML += 'Funktion B trödelt<br>';
				window.setTimeout(function() {
						document.getElementById('einfuege').innerHTML += 'Funktion B fertig<br>';
						d2.resolve();
					},2000
				);
			}
			function c() {
				document.getElementById('einfuege').innerHTML += 'Funktion C<br>';
				d3.resolve();
			}
			$.when(d1, d2, d3).done(function()
			{
        ende();
      });
			function ende() {
				document.getElementById('einfuege').innerHTML += 'Funktionen ENDE<br>';
			}
			a();
			b();
			c();
		</script>

mikdoe · 20. Nov. 2016

tsseh schrieb:
ok, when hattest du auch schon

danke für den vorschlag. Sieht gut aus!

meine fragen:

wie behebt man ReferenceError: $ is not defined?
wofür steht das $?
wieso zeigt es die ausgabe sofort? die zeiten aus setTimeout werden garnicht abgewartet bis resolve obwohl es im callback steht. warum?

tsseh · 20. Nov. 2016

mikdoe schrieb:
[*]wie behebt man ReferenceError: $ is not defined?

jquery in das verzeichniss legen

mikdoe schrieb:
[*]wofür steht das $?

jquery

mikdoe schrieb:
[*]wieso zeigt es die ausgabe sofort? die zeiten aus setTimeout werden garnicht abgewartet bis resolve obwohl es im callback steht. warum?

was wird sofort gezeigt?

mikdoe · 20. Nov. 2016

jetzt mit jQuery geht es perfekt.
Danke Dir!!!

andreax · 20. Nov. 2016

mikdoe schrieb:
jetzt mit jQuery geht es perfekt.

und verstehst du jetzt das Promise Objekt besser?

mikdoe · 20. Nov. 2016

andreax schrieb:
und verstehst du jetzt das Promise Objekt besser?

ja, diesen anwendungsfall fand ich sehr einleuchtend. mit sowas lerne ich eh am besten. hoffentlich behalte ich es auch

andreax · 20. Nov. 2016

toi toi toi :eagerness:

mikdoe · 25. Nov. 2016

Fertige Lösung muss ich noch nachreichen:

HTML:

<!DOCTYPE html>
<html>
	<head>
		<title>Test teils asynchrone, teils synchrone Ausführung</title>
		<meta charset="utf-8">
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	</head>
	<body>
		<div>
Frage:<br>
------<br>
Wie kann man die Funktionen a(), b() und c() parallel und ende() erst dann starten, wenn a(), b() und c() fertig sind?<br>
<br>
Es soll das ausgegeben werden:<br>
<br>
Funktion B trödelt<br>
Funktion C<br>
Funktion A langsam<br>
Funktion B fertig<br>
Funktionen ENDE<br>
<br>
Danke!<br>
<hr>
		</div>
		<div id="einfuege"></div>
		<script>
			"use strict";
			var d1 = jQuery.Deferred();
			var d2 = jQuery.Deferred(); 
			var d3 = jQuery.Deferred(); 
			function a() {
				window.setTimeout(function() {
						document.getElementById('einfuege').innerHTML += 'Funktion A langsam<br>';
						d1.resolve();
					},1000
				);
			}
			function b() {
				document.getElementById('einfuege').innerHTML += 'Funktion B trödelt<br>';
				window.setTimeout(function() {
						document.getElementById('einfuege').innerHTML += 'Funktion B fertig<br>';
						d2.resolve();
					},2000
				);
			}
			function c() {
				document.getElementById('einfuege').innerHTML += 'Funktion C<br>';
				d3.resolve();
			}
			function ende() {
				document.getElementById('einfuege').innerHTML += 'Funktionen ENDE<br>';
			}
			a();
			b();
			c();
			jQuery.when(d1,d2,d3).done(function() {
				ende();
			});
		</script>
	</body>
</html>

[GELÖST] Teils asynchrone, teils synchrone Ausführung

mikdoe

Moderator

andreax

Guest

mikdoe

Moderator

tsseh

Lounge-Member

kkapsner

Super Moderator

mikdoe

Moderator

tsseh

Lounge-Member

andreax

Guest

tsseh

Lounge-Member

mikdoe

Moderator

tsseh

Lounge-Member

mikdoe

Moderator

andreax

Guest

mikdoe

Moderator

andreax

Guest

mikdoe

Moderator