Gibt es sowieso mehrfach wiederholte Übersetzungen mit der Google Translate API

Question

Ab sofort habe ich ein Skript-Element an das ich meine API-Anfrage anschließe, wenn ein onclick registriert ist und sourceText der zu übersetzende Text ist. Die Rückruffunktion druckt nur etwas aus auf der Webseite (ändern Sie eine globale Variable, dann ein separaten Funktionsausgänge der globale Variable)

source = 'https://www.googleapis.com/language/translate/v2?key=YOUR_API_KEY&source=en&target=de&callback=translateText&q=' + sourceText; 
    newScript.src = source; 
    document.getElementsByTagName('head')[0].appendChild(newScript); 

Das Problem ist, es für die erste Übersetzung funktioniert (ersten Onclick), aber nach, dass die Die Übersetzungen ändern sich nicht, nachdem das Skript dem Kopf hinzugefügt wurde. Tatsächlich wird die Callback-Funktion niemals nach dem ersten Aufruf aufgerufen, und die neue Ausgabe ist nur die erste übersetzte Zeichenkette. Irgendeine Möglichkeit, das zu beheben?

Wie ich es verstehe, gibt es wahrscheinlich eine einfachere Möglichkeit, dies mit google.load ("Sprache") zu tun, könnte mir dann jemand in die richtige Richtung zeigen?

Answer 1

Ab sofort verwenden Sie eine Art von hackyish Art des Aufrufs des Skripts. Während das Skript eine Art "Ausführen" ist, würde ich empfehlen, eine Art Klasse zu schreiben und echte Ajax-Anfragen zu feuern. Um es ein bisschen einfacher für Sie selbst zu machen, würde ich jQuery (oder etwas Ähnliches) verwenden und eine wartbare Klasse schreiben. Es könnte in etwa so aussehen (nicht in irgendeiner Weise getestet, aber gibt Ihnen einen Hinweis;))

var Translate = function(translateHandler) { 
    this.endpoint = 'https://www.googleapis/language/translate/v2'; 
    this.apiKey = 'xyz'; 
    this.translateHandler = translateHandler; 
}; 

Translate.prototype.translate = function (text, source, target) { 
    $.get(this.endpoint, { 
     key: this.apiKey, 
     q: text, 
     source: source, 
     target: target 
    }, this.translateHandler.bind(this)); 
}; 

// usage 
var handler = function(result) { 
    // do something with the result 
}; 
var translater = new Translate(handler); 

$('#myButton').on('click', function(e) { 
    e.preventDefault(); 
    translater.translate($('#source').text(), 'en', 'de')); 
})