Есть ли в любом случае сделать несколько повторных переводов с помощью API Google Translate

Question

На данный момент у меня есть элемент script, к которому я прикрепляю свой запрос API, делая каждый раз, когда регистрируется onclick, а sourceText - это текст, который необходимо перевести. Функция обратного вызова просто печатает что-то на веб-странице (изменяет глобальную переменную, затем отдельная функция выводит эту глобальную переменную)

  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);

Проблема в том, что он работает для первого перевода (первый щелчок), но после этого переводы не меняются после добавления сценария в заголовок. Фактически, функция обратного вызова никогда не вызывается после первого вызова, а новый вывод - это только первая переведенная строка. Есть ли способ это исправить?

Как я понимаю, возможно, есть более простой способ сделать это с помощью google.load("language"). Может ли кто-нибудь указать мне правильное направление?

Answer 1

На данный момент вы используете своего рода хакерский способ вызова скрипта. Несмотря на то, что скрипт является своего рода "выполнением", я бы порекомендовал написать своего рода класс и запускать реальные ajax-запросы. Чтобы вам было проще, я бы использовал jQuery (или что-то в этом роде) и написал бы класс maintanable. Это может выглядеть примерно так (не проверено никоим образом, но дает подсказку;))

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') );
})