Question

我有一个包含几个表格的网页。

一开始它会检查语言并设置相应的翻译。

在html文件的末尾（加载所有元素之后），使用javascript设置翻译。

之后通过wifi请求变量。

This是我加载页面时看到的内容。在set_language_for_raw_data_()执行之前会显示不需要翻译的元素。

我查看了Chrome的开发者工具并查看了this。它显示set_language_for_raw_data_()在Raw_Data_Requests()之前执行，但在Raw_Data_Requests()完成之前不会显示。

有没有办法在执行Raw_Data_Requests()之前显示翻译？

Raw_data.html：

<!DOCTYPE HTML>
<html>
<head>    
  <script>
    checkLanguage(); //load language setting or use system default
  </script>
</head>

<body>
  <div id="site_unresponsive">
    <div id="inhalt">
      <h2 class="middle white_font expander" onclick="expander('raw_data')" id="raw_data_title"></h2>
      <ul class="hidden" id="raw_data">
          <table cellspacing="0" id="actual_meas">
            <tr>
              <td id="loading" style="display:none">Error: Connection lost</td>
            </tr>
            <tr class="odd">
              <td></td>
              <td id="Meas(0)">..</td>
            </tr>
            <tr>
              <td></td>
              <td id="Meas(1)">..</td>
            </tr>
            <tr class="odd">
              <td>Ubat</td>
              <td id="Meas(2)">..</td>
            </tr>
            <tr>
              <td>Ibat</td>
              <td id="Meas(5)">..</td>
            </tr>
            <tr class="odd">
              <td>U PWM</td>
              <td id="Meas(9)">..</td>
            </tr>
            <tr>
              <td style="color:darkorange">LED</td>
              <td id="Meas(11)">&bull;</td>
            </tr>
            <tr class="odd">
              <td style="color:green">LED</td>
              <td id="Meas(12)">&bull;</td>
            </tr>
            <tr>
              <td></td>
              <td id="Meas(19)">..</td>
            </tr>
            <tr class="odd">
              <td></td>
              <td id="Meas(20)">..</td>
            </tr>
            <tr>
              <td></td>
              <td id="Meas(100)">..</td>
            </tr>
          </table>
      </ul>
      <h2 class="middle white_font expander" onclick="expander('version')" id="version_title"></h2>
      <div class="hidden" id="version">
        <table cellspacing="0" class="data_tab" id="version_details">
          <tr>
            <th></th>
          </tr>
          <tr class="odd">
            <td id="device_version">~DeviceVersion~</td>
          </tr>
        </table>
      </div>
      <h2 class="middle white_font expander" onclick="expander('cumulatives')" id="cumulatives_title"></h2>
      <ul class="hidden" id="cumulatives">
        <li class="w300">
          <table cellspacing="0" id="cuml">
            <tr class="odd">
              <td></td>
              <td>~Cumulatives(0)~</td>
            </tr>
            <tr>
              <td></td>
              <td>~Cumulatives(1)~</td>
            </tr>
            <tr class="odd">
              <td></td>
              <td>~Cumulatives(2)~</td>
            </tr>
            <tr>
              <td></td>
              <td>~Cumulatives(3)~</td>
            </tr>
            <tr class="odd">
              <td></td>
              <td>~Cumulatives(4)~</td>
            </tr>
            <tr>
              <td></td>
              <td>~Cumulatives(5)~</td>
            </tr>
            <tr class="odd">
              <td></td>
              <td>~Cumulatives(6)~</td>
            </tr>
            <tr>
              <td></td>
              <td>~Cumulatives(7)~</td>
            </tr>
            <tr class="odd">
              <td></td>
              <td>~Cumulatives(8)~</td>
            </tr>
            <tr>
              <td></td>
              <td style="white-space:nowrap;">~Cumulatives(14)~</td>
            </tr>
          </table>
        </li>
      </ul>
      <h2 class="middle white_font expander" onclick="expander('error')" id="error_title"></h2>
      <div class="hidden" id="error" style="overflow-x:scroll;overflow-y:hidden;white-space:nowrap;">
        <table cellspacing="0" class="data_tab" id="error_history">
          <tr>
            <th>Nr</th>
            <th></th>
            <th></th>
            <th></th>
            <th>U</th>
            <th>I</th>
            <th>PWM</th>
            <th>T</th>
          </tr>
          <tr class="odd">
            <td>1</td>
            <td>~ErrorHistory(0,2,0)~</td>
            <td>~ErrorHistory(0,3,0)~</td>
            <td>~ErrorHistory(0,4,0)~</td>
            <td>~ErrorHistory(0,5,0)~</td>
            <td>~ErrorHistory(0,6,0)~</td>
            <td>~ErrorHistory(0,7,0)~</td>
            <td>~ErrorHistory(0,8,0)~</td>
          </tr>
          <tr>
            <td>2</td>
            <td>~ErrorHistory(1,2,0)~</td>
            <td>~ErrorHistory(1,3,0)~</td>
            <td>~ErrorHistory(1,4,0)~</td>
            <td>~ErrorHistory(1,5,0)~</td>
            <td>~ErrorHistory(1,6,0)~</td>
            <td>~ErrorHistory(1,7,0)~</td>
            <td>~ErrorHistory(1,8,0)~</td>
          </tr>
          <tr class="odd">
            <td>3</td>
            <td>~ErrorHistory(2,2,0)~</td>
            <td>~ErrorHistory(2,3,0)~</td>
            <td>~ErrorHistory(2,4,0)~</td>
            <td>~ErrorHistory(2,5,0)~</td>
            <td>~ErrorHistory(2,6,0)~</td>
            <td>~ErrorHistory(2,7,0)~</td>
            <td>~ErrorHistory(2,8,0)~</td>
          </tr>
          <tr>
            <td>4</td>
            <td>~ErrorHistory(3,2,0)~</td>
            <td>~ErrorHistory(3,3,0)~</td>
            <td>~ErrorHistory(3,4,0)~</td>
            <td>~ErrorHistory(3,5,0)~</td>
            <td>~ErrorHistory(3,6,0)~</td>
            <td>~ErrorHistory(3,7,0)~</td>
            <td>~ErrorHistory(3,8,0)~</td>
          </tr>
          <tr class="odd">
            <td>5</td>
            <td>~ErrorHistory(4,2,0)~</td>
            <td>~ErrorHistory(4,3,0)~</td>
            <td>~ErrorHistory(4,4,0)~</td>
            <td>~ErrorHistory(4,5,0)~</td>
            <td>~ErrorHistory(4,6,0)~</td>
            <td>~ErrorHistory(4,7,0)~</td>
            <td>~ErrorHistory(4,8,0)~</td>
          </tr>
          <tr>
            <td>6</td>
            <td>~ErrorHistory(5,2,0)~</td>
            <td>~ErrorHistory(5,3,0)~</td>
            <td>~ErrorHistory(5,4,0)~</td>
            <td>~ErrorHistory(5,5,0)~</td>
            <td>~ErrorHistory(5,6,0)~</td>
            <td>~ErrorHistory(5,7,0)~</td>
            <td>~ErrorHistory(5,8,0)~</td>
          </tr>
          <tr class="odd">
            <td>7</td>
            <td>~ErrorHistory(6,2,0)~</td>
            <td>~ErrorHistory(6,3,0)~</td>
            <td>~ErrorHistory(6,4,0)~</td>
            <td>~ErrorHistory(6,5,0)~</td>
            <td>~ErrorHistory(6,6,0)~</td>
            <td>~ErrorHistory(6,7,0)~</td>
            <td>~ErrorHistory(6,8,0)~</td>
          </tr>
          <tr>
            <td>8</td>
            <td>~ErrorHistory(7,2,0)~</td>
            <td>~ErrorHistory(7,3,0)~</td>
            <td>~ErrorHistory(7,4,0)~</td>
            <td>~ErrorHistory(7,5,0)~</td>
            <td>~ErrorHistory(7,6,0)~</td>
            <td>~ErrorHistory(7,7,0)~</td>
            <td>~ErrorHistory(7,8,0)~</td>
          </tr>
          <tr class="odd">
            <td>9</td>
            <td>~ErrorHistory(8,2,0)~</td>
            <td>~ErrorHistory(8,3,0)~</td>
            <td>~ErrorHistory(8,4,0)~</td>
            <td>~ErrorHistory(8,5,0)~</td>
            <td>~ErrorHistory(8,6,0)~</td>
            <td>~ErrorHistory(8,7,0)~</td>
            <td>~ErrorHistory(8,8,0)~</td>
          </tr>
          <tr>
            <td>10</td>
            <td>~ErrorHistory(9,2,0)~</td>
            <td>~ErrorHistory(9,3,0)~</td>
            <td>~ErrorHistory(9,4,0)~</td>
            <td>~ErrorHistory(9,5,0)~</td>
            <td>~ErrorHistory(9,6,0)~</td>
            <td>~ErrorHistory(9,7,0)~</td>
            <td>~ErrorHistory(9,8,0)~</td>
          </tr>
        </table>
      </div>
      <h2 class="middle white_font expander" onclick="expander('cycle')" id="cycle_title"></h2>
      <div class="hidden" id="cycle" style="overflow-x:scroll;overflow-y:hidden;white-space:nowrap;">
        <table cellspacing="0" class="data_tab" id="cycle_history" style="layout:fixed">
          <tr>
            <th>Nr</th>
            <th>Ah</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
          </tr>
          <tbody id="extended_cycles">
          </tbody>
        </table>
      </div>
      <h2 class="middle white_font expander" onclick="expander('error_tab')" id="error_tab_title">EEPROM data</h2>
      <div class="hidden" id="error_tab" style="overflow-x:scroll;overflow-y:hidden;white-space:nowrap;">
        <table cellspacing="0" class="data_tab" id="eeprom_data">
          <tr>
            <td>00: ~EEPROM(0)~</td>
          </tr>
          <tr>
            <td>10: ~EEPROM(1)~</td>
          </tr>
          <tr>
            <td>20: ~EEPROM(2)~</td>
          </tr>
          <tr>
            <td>30: ~EEPROM(3)~</td>
          </tr>
          <tr>
            <td>40: ~EEPROM(4)~</td>
          </tr>
          <tr>
            <td>50: ~EEPROM(5)~</td>
          </tr>
          <tr>
            <td>60: ~EEPROM(6)~</td>
          </tr>
          <tr>
            <td>70: ~EEPROM(7)~</td>
          </tr>
          <tr>
            <td>80: ~EEPROM(8)~</td>
          </tr>
          <tr>
            <td>90: ~EEPROM(9)~</td>
          </tr>
          <tr>
            <td>A0: ~EEPROM(10)~</td>
          </tr>
          <tr>
            <td>B0: ~EEPROM(11)~</td>
          </tr>
          <tr>
            <td>C0: ~EEPROM(12)~</td>
          </tr>
          <tr>
            <td>D0: ~EEPROM(13)~</td>
          </tr>
          <tr>
            <td>E0: ~EEPROM(14)~</td>
          </tr>
          <tr>
            <td>F0: ~EEPROM(15)~</td>
          </tr>
        </table>
      </div>
      <br>
    </div>
    <script>
      set_language_for_raw_data_();
      Raw_Data_Requests();
    </script>
  </div>
</body>
</html>

set_language_for_raw_data _（）：

document.getElementById("menu_title").innerHTML = d12;
document.getElementById("raw_data_title").innerHTML = t5;
document.getElementById("version_title").innerHTML = t7;
document.getElementById("cumulatives_title").innerHTML = t8;
document.getElementById("error_title").innerHTML = t9;
document.getElementById("cycle_title").innerHTML = t11;

checkLanguage（）：

language = getCookie("language");
if (language == "")
    applySystemLanguage();

setTranslations(language);

setTranslations（语言）：

switch (language){
    default:
    case "en":
        d12="Show RAW data";
        t5="Real time measurements";
        t7="Version";
        t8="Cumulatives";
        t9="Error history";
        t11="Cycle history";
    break;
}

Answer 1

使用rxjs你可以像

那样做

set_language_for_raw_data_(){
    //Your code
    return Observable.of(language );
}

set_language_for_raw_data_().subscribe(() => Raw_Data_Requests());

在这里，你要等到set_language_for_raw_data_返回一个observable。然后您可以订阅它。从观察完成的那一刻起，它将调用下一个函数。

您可以在http://reactivex.io/找到完整的解释，但是请花一些时间查看Observables的工作原理

Answer 2

我所做的翻译显示是添加超时：

set_language_for_raw_data_();
setTimeout(function(){
    Raw_Data_Requests();
}, 20);

显然，这足以让html显示/更新。

在上一个函数完成之前执行的Javascript函数

2 个答案: