jQuery Выполнить функцию после асинхронной загрузки данных - PullRequest
Новая
       42

jQuery Выполнить функцию после асинхронной загрузки данных

0 голосов
/ 07 декабря 2018

Я создал функцию jQuery, расширяющую свой собственный объект $.Эта функция переводит те элементы, которые прикреплены к элементу this: 

$.fn.extend({
  translate: function(sourceLang, targetLang) {
    if($(this).text().trim().length < 1 || !isNaN(parseInt($(this).text().trim())) || sourceLang == targetLang)
      return;

    let $function = this;

    $($function).each(function() {
      let $each = this;
      $.ajax({
        url: 'https://translate.yandex.net/api/v1.5/tr.json/translate',
        method: 'GET',
        dataType: 'JSONP',
        crossDomain: true,
        data: {
          key: /* my-secret-key */,
          text: $($each).text(),
          lang: sourceLang + '-' + targetLang
        },
        success: function(response) {
          try {
            if(response.code !== 200)
              throw "Response: " + response.code;
            $($each).text(response.text[0])
          } catch(error) {
            console.error('Translation error on element: ', $($function).text());
            console.error('Message returned by the server:', error);
          }
        },
        error: function(xhr, status, error) {
          console.error('Translation error on element: ', $($function).text());
          console.error('Message returned by the server:', xhr.responseText);
        }
      });
    });
  }
});

После загрузки кода я делаю это: 

$(document).ready(function() {
    let lang = $('html').attr('lang').split('-')[0];
    $('td td:visible').translate(lang, "en");
});

Примечание: HTML-тег выглядит следующим образом: <html lang="es-ES">, в зависимости от языка зарегистрированного пользователя.

У меня проблема в том, что таблица загружается через пару секунд (поскольку мы не в рабочей среде, они могут быть болеечем 30).Поэтому предыдущий блок кода бесполезен.

Примечание: тег <tbody> создается при добавлении данных.

Что япопытался:

1. Создать setInterval() и clearInterval(), когда $('td:visible').length больше 0: 

let iv = setInterval(function() {
    let lang = $('html').attr('lang').split('-')[0];
    let rows = $('tbody td:visible');
    if(rows.length > 0) {
        rows.translate(lang, "en");
        clearInterval(iv);
    }
}, 1000);

2. Установите .delay() перед переводом: 

let isTranslated = false;
while(!isTranslated) {
    let lang = $('html').attr('lang').split('-')[0];
    let rows = $('tbody td:visible');
    if(rows.length > 0) {
        rows.delay(1000).translate(lang, "en");
        isTranslated = true;
    }
}

Объем памяти, используемый браузером, превышает 200 МБ.Я также попробовал с $('table').on('DOMSubstreeModified', 'tbody', function() {}), но это не сработало.

Итак, какой подход вы бы порекомендовали использовать этот плагин перевода в этой таблице после загрузки его тела?

Редактировать 1:

У меня естьизменил свой код, чтобы выполнять меньше запросов API, благодаря рекомендации @ lucifer63: 

let $function = this;
let collection = [];
let translation = '';
$(this).each(function() {
  collection.push($(this).text());
});
let text = collection.join('::');

$.ajax({
  url: 'https://translate.yandex.net/api/v1.5/tr.json/translate',
  method: 'GET',
  dataType: 'JSONP',
  crossDomain: true,
  data: {
    key: /* my-secret-key */,
    text: text,
    lang: sourceLang + '-' + targetLang
  },
  success: function(response) {
    try {
      if(response.code !== 200) {
        throw "Response: " + response.code;
      }
      translation = response.text[0].split('::');
      $($function).each(function() {
        $(this).text(translation.shift());
      });
    } catch(error) {
      console.error('Message returned by the server:', error);
    }
  },
  error: function(xhr, status, error) {
    console.error('Message returned by the server:', xhr.responseText);
  }
});

Но все же мне нужно выяснить, как печатать после загрузки данных.

1 Ответ

0 голосов
/ 07 декабря 2018

Ну ... я думаю, что нашел ответ, который искал: 

$('body').on('DOMNodeInserted', 'table', function() {
    $('td:visible').translate('es', 'en');
});

Кажется, он работает правильно.

...