[JavaScript] Variable nach Schleife

Satsu · 9. April 2012

Hallo,

in einer Schleife addiere ich Werte einer Variable hinzu. Nach dieser Schleife möchte ich den Gesamtwert ausgeben (totalHK). Mein Problem ist, dass totalHK vor der Schleife ausgeführt wird, selbst wenn ich diese Funktion im Return der anderen Funktion (wie es jetzt ist) aufrufe.
Jeglicher console.log Befehl nach der Schleife wird auch zuerst ausgeführt.

Ich habe leider noch nicht ganz soviel Prorgammiererfahrungen und arbeite z.T. mittels Trial&Error aber hier komme ich einfach nicht weiter.

.

Code:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<body>
  <div id="chars"></div>
  <div id="totalHK"></div>
  <script type="text/javascript">
	var totalHK = 0;
  
	var Characters = new Array();
		
	Characters[0] = new Object();
	Characters[0]["data"] = ["Azshara","Balimu"];
		
	Characters[1] = new Object();
	Characters[1]["data"] = ["Eredar","Kishno"];
	
	Characters[2] = new Object();
	Characters[2]["data"] = ["Eredar","Franzisk"];
	
	Characters[3] = new Object();
	Characters[3]["data"] = ["Eredar","Snaf"];
	
	Characters[4] = new Object();
	Characters[4]["data"] = ["Azshara","Yog"];
	
	Characters[5] = new Object();
	Characters[5]["data"] = ["Azshara","Kishko"];
	
	Characters[6] = new Object();
	Characters[6]["data"] = ["Eredar","Eiz"];
	
	Characters[7] = new Object();
	Characters[7]["data"] = ["Eredar","Satzuu"];
	
	Characters[8] = new Object();
	Characters[8]["data"] = ["Azshara","Eizy"];
	/*
	Characters[9] = new Object();
	Characters[9]["link"] = ["???","???"];
	
	Characters[10] = new Object();
	Characters[10]["link"] = ["???","???"];
	*/
	
	function getData(){
		for( var i = Characters.length; i >= 0; i-- ) {
			for( var test in Characters[i] ) {
				$.getJSON("http://eu.battle.net/api/wow/character/" + Characters[i].data[0] + "/" + Characters[i].data[1] + "?fields=pvp&jsonp=?", function (data) {
					var $StatusString = "<p>" + data.name + "@" + data.realm + ":   " + data.pvp.totalHonorableKills + " HK" + "</p>";
					totalHK += data.pvp.totalHonorableKills;
					console.log("In Schleife: " + totalHK);
					$($StatusString).appendTo("#chars");				
				});					
			}

		}
		return showTotalHK(totalHK);
	}
	
	function showTotalHK(totalHK) {
		console.log(totalHK);
		var totalHKString = "<p><b>Total: " + totalHK + " HK</b><br>";
		$(totalHKString).appendTo("#totalHK");
	}	

	</script>
	<input type="button" value="DoIt!" onclick="getData()">
</body>
</html>

Neu:

Code:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script type="text/javascript">
	function init() {
		totalHK = 0;	  
		characters = [
			{data: ['Azshara', 'Balimu']},
			{data: ['Eredar', 'Kishno']},
			{data: ['Eredar', 'Franzisk']},
			{data: ['Eredar', 'Snaf']},
			{data: ['Azshara', 'Yog']},
			{data: ['Azshara', 'Kishko']},
			{data: ['Eredar', 'Eiz']},
			{data: ['Eredar', 'Satzuu']},
			{data: ['Azshara', 'Eizy']},
		];
	}
	
	function getData(){
		for( var i = characters.length; i >= 0; i-- ) {
			for( var elem in characters[i] ) {
				$.getJSON("http://eu.battle.net/api/wow/character/" + characters[i].data[0] + "/" + characters[i].data[1] + "?fields=pvp&jsonp=?", function (data) {
					var $statusString = "<p>" + data.name + "@" + data.realm + ":   " + data.pvp.totalHonorableKills + " HK" + "</p>";
					totalHK += data.pvp.totalHonorableKills;
					console.log("In Schleife: " + totalHK);
					$($statusString).appendTo("#chars");				
				});					
			}

		}
		return showTotalHK(totalHK);
	}
	
	function showTotalHK(totalHK) {
		console.log("Nach Schleife: " + totalHK);
		var totalHKString = "<p><b>Total: " + totalHK + " HK</b><br>";
		$(totalHKString).appendTo("#totalHK");
	}	

	</script>
</head>
<body onload="init()">
  <div id="chars"></div>
  <div id="totalHK"></div>
	<input type="button" value="DoIt!" onclick="getData()">
</body>
</html>

Gruß Satsu

EpicFace · 9. April 2012

Habs jetzt nur kurz angeschaut, aber hau mal deine Deklarierung und deine Initialisierung in eine Funktion und ruf die bei body onload auf also z.B.:

<body onload="Zuweisungen()">

Du solltest auch das Javascript tag, inklusive Code in den Header verschieben, dies ändert zwar nichts an deinen Problem aber gewöhne es dir schonmal an, da es im Body bei manchen Browsern zu problemen kommen kann.

Ich helf dir nachher nochmal wenns nötig ist.

Jojo_44 · 9. April 2012

EpicFace schrieb:
Du solltest auch das Javascript tag, inklusive Code in den Header verschieben, dies ändert zwar nichts an deinen Problem aber gewöhne es dir schonmal an, da es im Body bei manchen Browsern zu problemen kommen kann.

Das kann man so pauschal nicht sagen. Wenn man jquery z.B. von einem externen Host laden lässt (z.B. googleapis), dann sollte man das möglichst am Ende der Seite tun. Eigentlich sogar immer, weil das den Speed der Seite massiv erhöht. Außer in den Fällen wo es natürlich nicht geht (document.write, etc.). Wobei es dafür ja mittlerweile auch workarounds gibt, Stichwort Defer.

mfg Jojo

Satsu · 9. April 2012

Hab deine Sachen schon geändert. Danke soweit.

character · 9. April 2012

Gewöhne dir an, dass du Variablennamen in JS mit einem kleinen Buchstaben beginnst.

Außerdem wird heutzutage nicht mehr "new Array()" und "new Object()" geschrieben, sondern die deutlich übersichtlichere Kurzform davon, die du teilweise sogar schon (inkonsequent) verwendest: Arrays werden mit "[]" erstellt, Objekte/Maps mit "{}".

Code:

var characters = [
  {data: ['A', 'B']},
  {data: ['A', 'C']},
  {data: ['B', 'D']}
];

Das eigentliche Problem habe ich mir jetzt noch nicht angeschaut, weil mir das im Moment zu unleserlich ist.

EpicFace · 10. April 2012

Hab es jetzt nochmal kurz angeschaut, der Fehler ist das du einen "Asynchronous Callback"
d.h. das du in diesem fall die Funktion aufrufst, bevor du die antwort (das JSON) bekommen hast.
Sitze grad in der Bahn, deswegen kann ich deinen Code nicht schnell überarbeiten, schau dich einfach mal hier um.

http://api.jquery.com/jQuery.getJSON/

Augenmerk liegt auf .complete();

MfG
EpicFace

Satsu · 10. April 2012

Hallo,

danke sehr. Die Überprüfung auf den Status .complete habe ich hinbekommen, da ich allerdings mehrere Requests mache muss ich eh die Anzahl überprüfen, deswegen nehme ich default .success. Ist das Sinnvoll?

Für Verbesserungsvorschläge bin ich gerne offen. So wie ich es jetzt habe funktioniert es jedenfalls schon einmal.

Code:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script type="text/javascript">
	function init() {
		count = 0;
		totalHK = 0;	  
		characters = [
			{data: ['Azshara', 'Balimu']},
			{data: ['Eredar', 'Kishno']},
			{data: ['Eredar', 'Franzisk']},
			{data: ['Eredar', 'Snaf']},
			{data: ['Azshara', 'Yog']},
			{data: ['Azshara', 'Kishko']},
			{data: ['Eredar', 'Eiz']},
			{data: ['Eredar', 'Satzuu']},
			{data: ['Azshara', 'Eizy']}
		];
	}
	
	function getData(){
		for( i = characters.length; i >= 0; i-- ) {
			for( var elem in characters[i] ) {			
				$.getJSON("http://eu.battle.net/api/wow/character/" + characters[i].data[0] + "/" + characters[i].data[1] + "?jsonp=?", {				
				fields: "pvp"
				},
				function (data) {
					var $statusString = "<p>" + data.name + "@" + data.realm + ":   " + data.pvp.totalHonorableKills + " HK" + "</p>";
					totalHK += data.pvp.totalHonorableKills;
					$($statusString).appendTo("#chars");
					showTotalHK();		
				});						
			} 
		}
	}	
	
	function showTotalHK() {
		count++;
		if( count == characters.length ) {
			var totalHKString = "<p><b>Total: " + totalHK + " HK</b><br>";
			$(totalHKString).appendTo("#totalHK");		
		}
	}	
	</script>
</head>
<body onload="init()">
  <div id="chars"></div>
  <div id="totalHK"></div>
	<input type="button" value="DoIt!" onclick="getData()">
</body>
</html>

Gruß Satsu

Suche

[JavaScript] Variable nach Schleife

Satsu

Cadet 2nd Year

EpicFace

Cadet 3rd Year

Jojo_44

Lt. Junior Grade

Satsu

Cadet 2nd Year

character

Lt. Commander

EpicFace

Cadet 3rd Year

Satsu

Cadet 2nd Year

Ähnliche Themen