[jquery] variabelen uit array gebruiken in ajax request

[? ?]

code:

var servers = ['localhost', 'server1'];
for(var i = 0;i < servers.length; i++)
    {
        var server = servers[i];
        $.ajax({ type: "GET", url: "http://" + server + "/", async: true, success: function (data) { alert(server);} }, dataType: "json" });    
}

Resultaat: server1, server1.
Waarom komt dat en wat kunnen we er aan doen?
In mijn Google zoektocht komt ik veel vragen tegen over accessing variables, maar die gaan allemaal over een variabele toekennen na het ajax statement, als dat asynchroon request nog niet uitgevoerd is..

[xh3adshotx]

? ? schreef op vrijdag 10 oktober 2014 @ 13:37:

code:

var servers = ['localhost', 'server1'];
for(var i = 0;i < servers.length; i++)
    {
        var server = servers[i];
        $.ajax({ type: "GET", url: "http://" + server + "/", async: true, success: function (data) { alert(server);} }, dataType: "json" });    
}

Resultaat: server1, server1.
Waarom komt dat en wat kunnen we er aan doen?
In mijn Google zoektocht komt ik veel vragen tegen over accessing variables, maar die gaan allemaal over een variabele toekennen na het ajax statement, als dat asynchroon request nog niet uitgevoerd is..

Omdat je for loop de variable "i" blijft ophogen terwijl de request nog niet uitgevoerd is. Op het moment dat je AJAX request klaar is, is de server variable al weer overschreven met "server1".

[? ?]

Maar ik assign de waarde uit de array toch aan een nieuwe variabele server.
Als je dit er van maakt

code:

var server = "" + servers[i] + "";

Dan is er helemaal geen link meer met die array. Die tijdelijke variabele "server" moet dan toch voor het volgende statement gekend zijn en onveranderlijk zijn voor een volgende itteratie, want dan is er opnieuw een toekenning van een nieuwe variabele server die enkel dezelfde naam heeft, maar wel een ander geheugenadres. Niet?
Dat het ajax request wat tijd nodig heeft, is prima. Maar de stack/heap moet dan toch bijhouden welke variabele welke waarde heeft voor welke ajax functie.

[ Voor 13% gewijzigd door ? ? op 10-10-2014 13:58 ]

[xh3adshotx]

Er word niet continue in de for loop een nieuwe "context" gemaakt. De "server" variable word gewoon elke keer dat de loop uitgevoerd word overschreven, het gaat dus niet om de link met "servers" maar om "server" zelf.

[? ?]

Maar mijn variabele server staat toch netjes binnen de for loop.
Ik zou je uitleg willen geloven, als de var server buiten de for loop staat.
Is javascript kapot?

Hoe zou je dit oplossing als ik vragen mag?

Trouwens dit werkt dan weer wel. En dat is identiek als bovenstaande maar in een functie omhuld

code:

var info = "foo";
    for(var i = 0;i < servers.length; i++)
    {
        var server = "" + servers[i] + "";
        doSomething(server, info);
    }

function doSomething(server, info)
{
    $.ajax({ type: "GET", url: "http://" + server + "/" + info, async: true, success: function (data) { updateReceived(server, info, data); }, dataType: "json" });
}

Blijkbaar is javascript kapot en gaat ze het snel maken.

JavaScript presently does not support block scope which is the ability to define a variable to the scope of an if statement, switch statement, for loop, or while loop. This means the variable will not be accessible outside the opening and closing curly braces of the block. Currently any defined variables inside a block are accessible outside the block. However, this is soon to change, the let keyword has officially been added to the ES6 specification. It can be used alternatively to the var keyword and supports the declaration of block scope local variables.

Vandaar dat het in een functie wel normaal doet.

Ik had deze informatie niet gevonden zonder je opmerking met het woord "context". Dankje.

[ Voor 101% gewijzigd door ? ? op 10-10-2014 14:06 ]

[xh3adshotx]

? ? schreef op vrijdag 10 oktober 2014 @ 13:53:
Maar mijn variabele server staat toch netjes binnen de for loop.
Ik zou je uitleg willen geloven, als de var server buiten de for loop staat.
Is javascript kapot?

Hoe zou je dit oplossing als ik vragen mag?

Nee, dit heeft te maken met de manier waarop Javascript werkt. De variable vallen binnen een scope, omdat Javascript niet asynchroon opgebouwd is krijg je dus (zoals je nu ondervind) rare problemen als je asynchroon gaat werken.

Wat er gebeurt is dat de scope hergebruikt word in de for-loop, waardoor de variable "gerecycled" word voordat je AJAX request klaar is en dus een andere waarde bevat dan jij wilt.

Aangezien je al jQuery gebruikt kan je $.each gebruiken:

JavaScript:

var servers = ['localhost', 'server1'];

$.each(servers, function(i, server) {
    $.ajax({ 
        type: "GET", 
        url: "http://" + server + "/", 
        async: true, 
        dataType: "json",
        success: function (data) { 
            alert(server);
        } 
    });
});

Of een anonymous function als je het zonder jQuery wilt doen:

JavaScript:

var servers = ['localhost', 'server1'];

for(var i = 0;i < servers.length; i++) {
    (function(i) {
        var server = servers[i];
        $.ajax({ 
            type: "GET", 
            url: "http://" + server + "/", 
            async: true, 
            dataType: "json",
            success: function (data) { 
                alert(server);
            } 
        });
    })(i);
}

[? ?]

Ik had mijn bericht al gewijzigd, zie gewijzigd bericht :-)

[MueR]

Programming >> Webdesign, Markup & Clientside Scripting

[Tsjilp]

Wat jij had gevonden is wat anders, de reden dat het bij jou fout gaat is wat xh3adshotx aangaf.