Forståelse af javascript

Nej, selve JavaScript koden afvikles synkront, men flere forskellige aspekter af JavaScript afvikles asynkront, fx XHR, WebWorkers etc. Din metode "GetJSONData" lyder som om, den henter data fra en server, hvis den benytter sig af AJAX til dette, så er det formentlig en asynkron process.

I JavaScript er såkaldte "callback" funktioner blevet en meget populær løsning på asynkrone kald. Ideen er at du kalder funktionen "GetJSONData" med en funktion som argument, der så bliver kaldt når din data er blevet hentet.

Pseudo:

 function getJSONData(func) {
   var xhr = new XMLHttpRequest();
   xhr.open('GET', '/server/jsondata', true);
   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4 && xhr.statusCode === 200) {
       if (typeof func === 'function') {
         func(JSON.parse(xhr.responseText));
       }
     }
   }
 
   xhr.send(null); 
 }

Egentlig er den funktion du tildeler "xhr.onreadystatechange" også en callback funktion, der bliver kaldt hver gang der er nye informationer omkring dit serverkald.

@Jakob
Tak for hurtigt svar.

Processen er:
DrawChart() kaldes fra en script-block.
Denne kalder så GetJSONData() som bruger jQuery til at lave et ajax-kald til min server for at få nogle JSON data. Hertil bruger jeg

 $.getJSON("URLToCall", null, function (data) {
 //Set global variable
 }

Efter min GetJSONData()-kald bruger jeg værdien af den globale variabel (hvis den er sat).

Men forstår jeg det korrekt at fordi jQuery's callback metode sættes så laves det asynkront og derfor sættes getJSON-metoden igang og fortsætter asynkront og derfor vender tilbage til min DrawChart() inden det asynkrone kald til callback metoden har sat min globale variabel?

Og hvad er best practice med hensyn til sådanne "udfordringer"? Hvordan plejer man at lave dette bedst?

Du kan se det sådan her...jeg har sat "linjenumre" ind so viser kronologien:

 1: console.log('Sæt hentning af data i gang.');
 2: $.ajax('/jsondata', {
        success : function(data) {
 4:         console.log('Data er hentet:', data);
        }
    });
 3: console.log('Hentningen er i gang, men ikke færdig.');

Så sidste linje bliver udført før dataene er hentet...det er det asynkrone.

Du skal dele din logik op. Jeg ville fx omdøbe din funktion "drawChart" til noget andet, mere sigende fx: "beginDrawChart". Herefter ville min callchain se sådan her ud:

beginDrawChart() -> getJSONData() -> drawChart(data);

Du kalder altså selve "tegne" funktionen, der benytter din data, fra callback'et i getJSONData metoden:

 function beginDrawChart() { // 1. beginDrawChart()
   $.ajax('/jsondata', {
     success: function(data) { // 2. "getJSONData" callback funktion
       drawChart(data); // 3. drawChart - Her tegner du dit chart, med de hentede data
     }
   });
 }

Et problem du kan støde ind i er meget dybe "nested call trees", i det du nogen gange vil opleve en hulens masse callback funktioner inden i hinanden. Der er dog mange måder at løse dette på, og de er blot en Google søgning væk.

edit: PS:
Det er generelt best-practice kodestil, at navngive normale funktioner med camelCase (altså lille start bogstav). Normalt forbeholder man funktioner med stort begyndelsesbogstav til "class" constructorer.

Man kan faktisk chain det med deferred ... det er lidt kompliceret, men super sejt

 function init () {
     getData("/getJsonData/")
         .done(drawChart)
         .fail(failed);
 }
 
 function failed() {
     console.log("b0rked the get data");
 }
 
 function drawChart(data) {
     console.log("drawChart");
 }
 
 function getData (url) {
     return $.ajax({
         type: "get",
         url: url,
         dataType: 'json',
         timeout: 2000
     });
 }

Så skal init() se således ud:

 function init () {
     getData("/getJsonData/")
         .done(drawChart)
         .fail(failed);
 }

...altså ikke semikolon efter 'done(drawChart)'

yes .. det var en fastetejl
Teknisk set burde man nok også pakke det hele lidt mere ind:

 ;(function ($, undefined) { 
     'use strict';
 
     var charts = {
         init: function () {
             getData("/getJsonData/")
                 .done(this.drawChart)
                 .fail(this.failed);
         },
 
         failed: function() {
             console.log("b0rked the get data");
         },
 
         draw: function(data) {
             console.log("drawChart");
         },
 
         get: function (url) {
             return $.ajax({
                 type: "get",
                 url: url,
                 dataType: 'json',
                 timeout: 2000
             });
         }
     };
 
     $(function () {
         charts.init();
     });
 })(jQuery);

Du skal dele din logik op. Jeg ville fx omdøbe din funktion "drawChart" til noget andet, mere sigende fx: "beginDrawChart". Herefter ville min callchain se sådan her ud:

beginDrawChart() -> getJSONData() -> drawChart(data);

Du kalder altså selve "tegne" funktionen, der benytter din data, fra callback'et i getJSONData metoden:

JScript kode 

 function beginDrawChart() { // 1. beginDrawChart()
   $.ajax('/jsondata', {
     success: function(data) { // 2. "getJSONData" callback funktion
       drawChart(data); // 3. drawChart - Her tegner du dit chart, med de hentede data
     }
   });
 }

Et problem du kan støde ind i er meget dybe "nested call trees", i det du nogen gange vil opleve en hulens masse callback funktioner inden i hinanden. Der er dog mange måder at løse dette på, og de er blot en Google søgning væk.

edit: PS:
Det er generelt best-practice kodestil, at navngive normale funktioner med camelCase (altså lille start bogstav). Normalt forbeholder man funktioner med stort begyndelsesbogstav til "class" constructorer.

Tak Jakob

Mit problem er at jeg bruger Google charts i denne forbindelse.
Det eksempel jeg har bygget videre på har en ren scripts blok uden metode til at initialisere tegningen af dette chart, og i denne forbindelse jeg så skal kalde mit jQuery AJAX for at få data til at kunne bruge for at kunne fylde data i rigtigt format ind for så at tegne mit chart.
Se gerne mere her: http://jsfiddle.net/WedEF/4/

Som du kan se så er data nu indskrevet i javascriptet, men skal have det lavet således at jeg kan modtage mine JSON data (fra jQuery AJAX kald) til at lave samme trick - bare dynamisk med de hentede data.

Jeg er klar over at der findes masser af løsninger derude, men der findes også enormt mange forkerte og dårlige som jeg lidt håbede på i ville kunne skære igennem.
Jeg har intet imod at Google og læse, men et fingerpeg om retning hjælper lidt så jeg ikke bare læser 7 forskellige måder og tænker ja de er smarte så må jeg bare prøve dem alle sammen af før jeg forstår hvad der er smart og dumt ved hver og håbe på jeg rammer alt det dumme i mine forsøg
Der er enormt kloge folk herinde som jeg håbede på kunne give lidt ide om hvad jeg skal søge efter eller forklare lidt hvad er godt / skidt og hvorfor den ene metode at gøre tingene på er bedre end en anden.

Man kan faktisk chain det med deferred ... det er lidt kompliceret, men super sejt

JScript kode 

 function init () {
     getData("/getJsonData/")
         .done(drawChart)
         .fail(failed);
 }
 
 function failed() {
     console.log("b0rked the get data");
 }
 
 function drawChart(data) {
     console.log("drawChart");
 }
 
 function getData (url) {
     return $.ajax({
         type: "get",
         url: url,
         dataType: 'json',
         timeout: 2000
     });
 }

Kan du eller nogle af de andre hjælpe med at forklare defered? At man kan sætte metoder i forlængelse af hinanden?