[JS] Callback + variabelen

[TvdW]

In mijn HTML zitten allemaal <a rel="translate"> blokken die vertaald moeten worden.

HTML:

<script type="text/javascript">
    tds = document.getElementsByTagName('a');
    for (var i = 0; i < tds.length; i++) {
        if (tds[i].rel == "translate") {
            var td = tds[i];
            google.language.detect(td.innerHTML, function(result) 
                {
                    if (!result.error && result.language) {
                        google.language.translate(td.innerHTML, result.language, 'en', function(result) {
                            if (result.translation) {
                                td.innerHTML = result.translation;
                            }
                        });
                    }
                }
            );
        }
    }
</script>

Dat heb ik nu. Werkt niet, omdat [var td] niet doorgegeven wordt naar de callback, waardoor alleen de laatste <a> vertaald wordt.

Mijn vraag: hoe moet dit wél?

Tom

[ Voor 0% gewijzigd door een moderator op 28-06-2009 12:17 . Reden: highlighting aangezet ]

[.oisyn]

Het punt is dat de callback een referentie heeft naar die variabele, en aangezien je de var binnen de loop wijzigt zal dus tijdens de aanroep van de callback de laatste toegekende waarde in 'td' staan.

Dit kun je oplossen door een functie te maken die de callback retourneert, die de 'td' als parameter heeft. En die functie zelf zou je evt ook direct inline kunnen definieren en aanroepen:

JavaScript:

var myVar = 34;
var f1 = function() { alert(myVar); };
var f2 = function(i) { return function() { alert(i); } }(myVar);
myVar = 22;
f1(); // alert 22
f2(); // alert 34

[TvdW]

Als ik het goed begrijp, is dit wat je bedoelt :

HTML:

<script type="text/javascript">
    tds = document.getElementsByTagName('a');
    for (var i = 0; i < tds.length; i++) {
        if (tds[i].rel == "translate") {
            google.language.detect(tds[i].innerHTML, function(result, theObj)
                {
                    if (!result.error && result.language) {
                        google.language.translate(theObj.innerHTML, result.language, 'en', function(result, theObj) {
                            if (result.translation) {
                                theObj.title = result.translation;
                            }
                        }(theObj));
                    }
                }(tds[i])
            );
        }
    }
</script>

Dan krijg ik echter in mijn debug console een serie foutmeldingen (allemaal dezelfde) :
Error: a is not a function
Source File: http://www.google.com/uds...055da5300/default+en.I.js
Line: 109

Tom

-edit-
verkeerd begrepen, even verder kijken

-edit2-

HTML:

<script type="text/javascript">
    tds = document.getElementsByTagName('a');
    
    getCallback1 = function(theObj) {
        return function(result) {
            if (!result.error && result.language) {
                google.language.translate(theObj.innerHTML, result.language, 'en', getCallback2(theObj));
            }
        }
    }
    
    getCallback2 = function(theObj) {
        return function(result) {
            if (result.translation) {
                theObj.title = result.translation;
            }
        }
    }
    
    for (var i = 0; i < tds.length; i++) {
        if (tds[i].rel == "translate") {
            google.language.detect(tds[i].innerHTML, getCallback1(tds[i]));
        }
    }
</script>

Mocht iemand het ooit nodig hebben, gebruik 't maar!

Bedankt .oisyn

[ Voor 30% gewijzigd door TvdW op 28-06-2009 14:15 ]

[.oisyn]

TvdW schreef op zondag 28 juni 2009 @ 14:11:
Als ik het goed begrijp, is dit wat je bedoelt :

HTML:

<script type="text/javascript">
    tds = document.getElementsByTagName('a');
    for (var i = 0; i < tds.length; i++) {
        if (tds[i].rel == "translate") {
            google.language.detect(tds[i].innerHTML, function(result, theObj)
                {
                    if (!result.error && result.language) {
                        google.language.translate(theObj.innerHTML, result.language, 'en', function(result, theObj) {
                            if (result.translation) {
                                theObj.title = result.translation;
                            }
                        }(theObj));
                    }
                }(tds[i])
            );
        }
    }
</script>

Nee, dit:

HTML:

<script type="text/javascript">
    tds = document.getElementsByTagName('a');
    for (var i = 0; i < tds.length; i++) {
        if (tds[i].rel == "translate") {
            google.language.detect(tds[i].innerHTML, function(theObj) { return function(result) {
                {
                    if (!result.error && result.language) {
                        google.language.translate(theObj.innerHTML, result.language, 'en', function(result) {
                            if (result.translation) {
                                theObj.title = result.translation;
                            }
                        });
                    }
                }}(tds[i])
            );
        }
    }
</script>

Bij het definieren van de callback in de callback zelf hoef je het niet nog een keer met een geneste functie te doen - theObj wordt immers nooit gewijzigd dus blijft hij gewoon z'n waarde behouden.

[ Voor 35% gewijzigd door .oisyn op 28-06-2009 14:59 ]