Basic JavaScript Scoping

Question

Ich versuche, variable Bereiche zu verstehen. Warum kann ich den Zutatenwert von der Utils.delay-Funktion auf der HTML-Eigenschaft von Sandwich nicht erhalten?

Coffee:

supermarket = JSON.parse(Utils.domLoadScriptSync(URL)) 


cart = (ingredients) -> 
    Utils.delay 5, -> 
    ingredients = supermarket[i].name 
    return ingredients 
    return ingredients 
cart() 

sandwich = new Layer 
    html: ingredients 

Transpiled JavaScript:

var cart, sandwich, supermarket; 

supermarket = JSON.parse(Utils.domLoadScriptSync(URL)); 

cart = function(ingredients) { 
    Utils.delay(5, function() { 
    ingredients = supermarket[i].name; 
    return ingredients; 
    }); 
    return ingredients; 
}; 

cart(); 

sandwich = new Layer({ 
    html: ingredients 
}); 

Answer 1

Also Ihr Coffeescript JavaScript umgewandelt wird, wie folgt:

var cart, sandwich, supermarket; 

supermarket = JSON.parse(Utils.domLoadScriptSync(URL)); 

cart = function(ingredients) { 
    Utils.delay(5, function() { 
    ingredients = supermarket[i].name; 
    return ingredients; 
    }); 
    return ingredients; 
}; 

cart(); 

sandwich = new Layer({ 
    html: ingredients 
}); 

Es ist wie Utils.delay klingt, ist eine asynchrone Funktion, die wartet x Sekunden vor dem Ausführen .

Also, was passiert ist, wenn Sie cart() aufrufen, startet es einen Timer, um die Funktion in Utils.delay auszuführen und gibt dann ingredients zurück. Aber die Funktion Utils.delay wurde noch nicht ausgeführt, so dass ingredients nicht existiert.

Wenn die Funktion in Utils.delay ausgeführt wird, erhält sie den Wert und gibt ihn zurück. (Nicht sicher, zu was es zurückkommt.)

Was genau versuchen Sie zu tun? Was ist das Endziel hier?

Answer 2

Ich werde die Probleme in der transpiled Javascript hinweisen:

// Note that ingredients isn't declared here. 
var cart, sandwich, supermarket; 

supermarket = JSON.parse(Utils.domLoadScriptSync(URL)); 

// ingredients is actually "declared" here. It's scoped to the function as a parameter. 
cart = function(ingredients) { 
    // We're going to run this function *asynchronously* 5 seconds later. 
    Utils.delay(5, function() { 
    // Here we assign a value to the function parameter, but by this 
    // point cart will have already returned its value. 
    ingredients = supermarket[i].name; 
    return ingredients; 
    }); 
    // Return undefined. 
    return ingredients; 
}; 
// cart is a function that takes a parameter, but you haven't passed in anything. 
// cart also returns a value, but you haven't captured the return value. 
cart(); 

sandwich = new Layer({ 
    // This ingredients is an undefined variable because the other ingredients 
    // is scoped to the function. 
    html: ingredients 
}); 

Utils.delay wird für 5 Sekunden verzögern, aber es ist asynchron zu verzögern. Es wird der Funktionsvariablen ingredients einen Wert zuweisen, aber die cart-Funktion wird ihren Wert zurückgeben, bevor dies erledigt ist. Und da ingredients die Funktion hat, wird der äußere Bereich niemals den zugewiesenen Wert ingredients sehen.

Meine Vorschläge dieses Problem zu beheben:

• Sie brauchen nicht in ingredients als Funktionsparameter übergeben. Du benutzt es nie.
• cart gibt einen Wert zurück, den Sie erfassen sollten. Ich weiß nicht, was Sie mit Utils.delay zu tun versuchen, aber es wird nicht funktionieren.

Dies sind nur Vorschläge. Ohne genau zu wissen, was Sie tun wollen, weiß ich nicht, ob sie funktionieren werden.