我创建了一个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.当$('td:visible').length大于0:时创建setInterval()和clearInterval()
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;
}
}
浏览器消耗的内存大于200MB。我也试过使用$('table').on('DOMSubstreeModified', 'tbody', function() {})，但没有成功。
那么，在这个表加载tbody之后，你建议用什么方法来使用这个翻译插件呢？
编辑1:
由于@lucifer63:的推荐，我已经更改了代码，因此我执行的API请求更少
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);
}
});
但是，我仍然需要弄清楚如何在数据加载后打印。
嗯。。。我想我找到了我想要的答案：
$('body').on('DOMNodeInserted', 'table', function() {
$('td:visible').translate('es', 'en');
});
它似乎工作正常。