进行翻译的生命周期监控及触发

当用户点击切换语言时触发

当用户点击切换语言时，立即触发，然后再进行切换语言。
点击切换语言后，实际触发的是 translate.changeLanguage('english'); 这里便是在调用它后，立即触发，触发完成后再执行原本的语言切换。
设置方式： 

  1. translate.lifecycle.changeLanguage.push(function(to){
  3. });

这里需要注意的是，如果当前是第一次切换语言，那么它会直接将当前原文翻译进行切换，这期间并不会刷新页面；
而切换了一次后，再进行一次切换其他语言时，他会触发刷新页面，这时也就是先触发 translate.lifecycle.changeLanguage 设置的，然后再刷新页面。 有关为什么第二次切换语言会刷新页面的解释，可点此查看

当执行翻译时触发

当执行 translate.execute(); 之后，它会进行一下操作：

  1. 进行一些初始化及检测，如果不达标则直接终止不做任何处理，同时也不会触发任何下面的事件。
  2. 进行图片翻译
  3. 对要翻译的区域的所有节点进行扫描，识别出需要进行翻译的文本，进行收集分析，加入待翻译的文本队列
  4. 对待翻译的文本队列中的翻译文本进行本地浏览器缓存命中处理，如果本地缓存全部命中了，那也就没有后面的网络请求什么事了
  5. 对本地浏览器缓存命中之后，没有被缓存命中，未进行翻译的文本，进行通过请求网络接口的方式进行翻译处理，发起网络请求，将要翻译的文本发送到翻译服务进行翻译，等待拿到翻译结果后，进行翻译。（这个会产生 50ms ~ 10s 的时间差，也是造成视觉上翻译速度快慢的最根本原因）
  6. 完毕

以下提供的几个针对其生命周期中的某个特定点，提供监控及主动触发你自定义的方法，来做一些事情。

翻译触发

每当触发执行 translate.execute() 时，会立即触发此。
这个触发是指在所有判断之前，也就是只要 触发了 translate.execute() 会立即触发此，然后在进行执行其他的。
设置方式： 

  1. translate.lifecycle.execute.trigger.push(function(data){
  2.     console.log(data.uuid);
  3. });

扩展用法 - 当用户打开页面后，第一次触发 translate.execute() 时，进行触发

  1. translate.lifecycle.execute.trigger.push(function(data){
  2.     if(translate.executeTriggerNumber === 1){
  3.         console.log('这是打开页面后，第一次触发 translate.execute() ，因为translate.executeTriggerNumber 记录的是translate.execute() 触发的次数。');
  4.     }
  5. });

翻译开始

每当触发执行 translate.execute() 时，会先进行当前是否可以正常进行翻译的判定，比如 当前语种是否就已经是翻译之后的语种了是否没必要翻译了等。（这些初始判定可以理解成它的耗时小于1毫秒，几乎没有耗时）
经过初始的判断后，发现允许被翻译，那么在向后执行之前，先触发此。
也就是在进行翻译之前，触发此。
设置方式： 

  1. translate.lifecycle.execute.start.push(function(data){
  2.     console.log(data.uuid);
  3. });

发起网络请求前

每当触发执行翻译动作 translate.execute() 时，当缓存中未发现，需要请求翻译API进行翻译时，在发送API请求前，触发此

  1. translate.lifecycle.execute.translateNetworkBefore.push(function(data){
  2.     console.log(data.uuid);
  3. });

发起网络请求后

每当触发执行翻译动作 translate.execute() 时，当缓存中未发现，需要请求翻译API进行翻译时，在发送API请求后，也就是拿到 API响应、或网络请求失败后，立即触发此 

  1. translate.lifecycle.execute.translateNetworkAfter.push(function(data){
  2.     console.log(data.uuid);
  3. });

说明：

  1. 不管网络请求是否成功，它都会被触发
  2. 不管翻译结果是否成功，它都会被触发
  3. 在网络请求完毕后立即触发，不会再有其他时间损耗。也就是它是在网络请求完毕后，渲染UI页之前就会被触发。

翻译完成

translate.execute() 的翻译渲染完毕触发。
这个完毕是指它当触发 translate.execute() 进行翻译后，无论是全部命中了本地缓存，还是有部分要通过翻译接口发起多个网络请求，当拿到结果（缓存中的翻译结果或多个不同的有xx语种翻译的网络请求全部完成，这个完成是包含所有成功跟失败的响应），并完成将翻译结果渲染到页面中进行显示后，触发此
它跟 translateNetworkFinish 的区别是， translateNetworkFinish 仅仅针对有网络请求的才会触发，而 renderFinish 是无论何种情况，只要 translate.execute() 执行完毕都会触发。比如全部命中了浏览器本地缓存，无需发起任何网络翻译请求这种情况时，也会触发。

  1. translate.lifecycle.execute.renderFinish.push(function(uuid, to){
  3. });

实际使用场景示例：
比如，我有一个中文网站，翻译为英文浏览时，要做到完全不显示中文的文字内容，不出现先显示中文然后瞬间在显示英文的情况。
操作方式：
首先，在原本中文网站加载后，先用CSS显示一个遮罩层，将原本显示中文的部分遮罩起来，在遮罩层上，用英文显示一个提示信息，比如 <div id="load">loading...</div>
然后在 translate.execute(); 的前面，增加一个翻译完成的监控，以便在翻译完成后，来触发将 loading… 给隐藏掉 : 

  1. translate.lifecycle.execute.renderFinish.push(function(uuid, to){
  2.     document.getElementById('load').style.display='none';
  3. });

这样就实现了打开网页后，先在页面的中文上面出现个英文提示 loading… 给用户一个友好的提示，当翻译执行完毕后（页面的中文已经改成了英文）将 <div id="load"> 这个id元素隐藏，将loading… 的提示隐藏，将英文的页面显示出来。
其实这个示例就仅仅只是一个示例，你如果想要达到完全不显示源语言文字的效果，可以参考 网页打开时自动隐藏文字，翻译完成后显示译文 这里有现成的功能可以直接拿来达到这个效果。

执行结束

每当 translate.execute() 执行结束、中止、自检不通过跳出 … 等，都会触发这个。
注意，不管在 translate.execute() 是否自检通过、不管是否进行了翻译、不管文本翻译API接口是否拿到翻译结果，只要 translate.execute 执行完毕或触发了什么自检不通过不再往下执行，都会触发这个。
这个仅仅只是用于 translate.execute() 从上而下执行完跳出时，进行触发的。 

  1. translate.lifecycle.execute.finally.push(function(data){
  2.     console.log(data.uuid);
  3. });

data 参数：

注意 它触发的可能会非常多，比如如果你启用了 translate.listener.start(); 、 translate.request.listener.start(); … 等，都会自动触发此 translate.execute()

注意

  1. 需要 translate.js v3.18.55.20250928 及更高版本
  2. 需要设置在 translate.execute() 前面
  3. 这里的监听仅仅针对网页正常翻译，也就是 translate.execute() 、 translate.changeLanguage(...) 、以及设置动态监控网页变化、动态监控网络请求后触发的翻译，会触发这里。
    但是像是扩展使用如 translate.request.translateText(…) 手动调用翻译接口执行翻译操作 这个是会对他生效的，它不会触发以上的监听。