jQuery request.done keine überspeicherung

[Ravenstorm]

Hallo Leute,

da ich mich nach langem wieder an mein CMS gesetzt habe und nun per jQuery einen request durchlaufen lasse, diesen aber nicht richtig bearbeiten kann brauch ich eure Hilfe.

Folgendermaßen ich habe nun erstmal 2 Dateien Collection.php & Save_Col.php

Collection.php:

PHP Code:

var request = $.post('controller/Save_Col.php', { data: dataToSend } );
var test = "TestString";

request.done(function(jsonArray){

   var requestData = JSON.parse(jsonArray);
   test = requestData.msg;

   console.log("TestVariable_Done: " + test); //MsgString

});

console.log("TestVariable: " + test); //TestString sollte jedoch MsgString sein 


So nun die Frage, ich überspeichere doch die test var im .done block warum erhalte ich nach dem Block jedoch wieder die unveränderte variable?

[Cooltek]

Hey,
du befindest dich in einer Funktion

function(jsonArray)

Wie war das nochmal mit dem Scope von Variablen? Wenn ichs richtig im Kopf hab ists wie in PHP: in Funktionen definierte Variablen gelten ausserhalb dieser nicht, genauso sind alle ausserhalb definierten Variabeln (sofern es keine Globals sind) nicht vorhanden. Ich glaub, damit hab ich dein Problem gelöst oder?
lg

[mydoom]

Das klingt nach einem typischen Denkfehler beim Umgang mit asynchronen Funktionen:

request.done() wird erst aufgerufen, nachdem

console.log("TestVariable: " + test);

ausgegeben wurde. Somit ergibt sich die Situation:

"TestVariable: TestString"
"TestVariable_Done: ..."


@Cooltek:
Das ist nicht ganz richtig: In Javascript gelten selbst mit "var" im globalen Kontext definierte Variable als globale Variable und sind sehr wohl .

[Ravenstorm]

Originally Posted by mydoom

Das klingt nach einem typischen Denkfehler beim Umgang mit asynchronen Funktionen:

request.done() wird erst aufgerufen, nachdem

console.log("TestVariable: " + test);

ausgegeben wurde. Somit ergibt sich die Situation:

"TestVariable: TestString"
"TestVariable_Done: ..."


@Cooltek:
Das ist nicht ganz richtig: In Javascript gelten selbst mit "var" definierte Variable im globalen Kontext als globale Variable und sind sehr wohl in der Funktion verfügbar.

Da scheint der Fehler zu liegen.

Dort wo

PHP Code:

console.log("TestVariable: " + test); 


steht, steht aber normalerweiße ein

PHP Code:

return value; 


da es die Value des jEditable in eine Zelle der Tabelle schreibt.
Allerdings will ich die Value vorher durch das .done abfragen und dann erst eintragen, nur weiß ich nun nicht, wie ich da vorgehen sollte.

[mydoom]

Originally Posted by Ravenstorm

Dort wo

PHP Code:

console.log("TestVariable: " + test); 


steht, steht aber normalerweiße ein

PHP Code:

return value; 


Das ergibt für mich keinen Sinn, da dort quasi immer "TestString" zurückgegeben werden sollte.

// Oder null undefined wenn value gar nicht definiert wurde.

[Ravenstorm]

Originally Posted by mydoom

Das ergibt für mich keinen Sinn, da dort quasi immer "TestString" zurückgegeben werden sollte.

// Oder null undefined wenn value gar nicht definiert wurde.

Du kannst es auch als

PHP Code:

return test; 


sehen. Somit macht es für dich vielleicht mehr Sinn.

[mydoom]

Nicht wirklich, da $.post nur ein Alias für

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

also einer AJAX-Funktion von jQuery ist. Und die haben die nette Eigenschaft asynchron zu sein:

Originally Posted by http://api.jquery.com/jQuery.ajax/

The first letter in Ajax stands for "asynchronous," meaning that the operation occurs in parallel and the order of completion is not guaranteed. The async option to $.ajax() defaults to true, indicating that code execution can continue after the request is made.

Du kannst also gar nicht davon ausgehen, dass der Request abgeschlossen und Daten zurückgekommen sind, nur weil die Anweisung im Code nach der Callback-Funktion steht.

[MrPuschel]

Setz das async flag auf false.

[mydoom]

Originally Posted by MrPuschel

Setz das async flag auf false.

Originally Posted by http://api.jquery.com/jQuery.ajax/

Setting this option to false (and thus making the call no longer asynchronous) is strongly discouraged, as it can cause the browser to become unresponsive.

//Edit:

Originally Posted by http://api.jquery.com/jQuery.ajax/

Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

[MrPuschel]

Originally Posted by mydoom

PHP Code:

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType,
  async: false
}); 


Mit dem setting async auf false wird der request nicht asynchron ausgeführt.

[mydoom]

Das ist mir schon klar. Ich habe die Dokumentation gelesen und oben zitiert weshalb das keine gute Idee ist.

[MrPuschel]

Originally Posted by mydoom

Das ist mir schon klar. Ich habe die Dokumentation gelesen und oben zitiert weshalb das keine gute Idee ist.

Und das passiert warum?

[mydoom]

Weil Javascript im UI-Thread läuft.

[MrPuschel]

Originally Posted by mydoom

Weil Javascript im UI-Thread läuft.

Da mach dir mal keine Sorgen. Die JavaScript Engine läuft in ihrem eigenen thread und legt den UI thread sicher nicht schlafen. In der jquery Implementation bedeutet das async flag nur das die Rückgabe nicht als callback läuft sondern prozedural abläuft.

Es wird also auf eine Rückgabe gewartet. Das schlimmste was dir passieren kann ist, das du auf einen timeout warten musst wenn das Ziel nicht erreichbar ist. Es ist kein gutes Design synchrone requests abzusetzen, manchmal jedoch Notwendig und ganz sicher schießt es deinen Browser nicht ohne Grund ab.

[mydoom]

Du kannst ja mal zum Spaß ne Endlosschleife in js starten und dir ansehen was passiert. Warum sollte man nicht einfach alles in der Callback-Funktion bearbeiten?