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

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

javascript html

在完成上一个函数之前执行的Javascript函数,javascript,html,Javascript,Html,我有一个网页，其中包含一些表格开始时，它检查语言并设置相应的翻译在html文件的末尾（加载所有元素后），使用javascript设置翻译之后，通过wifi请求变量是我加载页面时看到的内容。在执行set\u language\u for\u raw\u data\u（）之前，将显示不需要翻译的元素我已经检查了Chrome的开发工具和saw。它显示在raw\u data\u Requests（）之前执行set\u language\u for\u raw\u data\u Reques

我有一个网页，其中包含一些表格

开始时，它检查语言并设置相应的翻译

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

之后，通过wifi请求变量

是我加载页面时看到的内容。在执行

set\u language\u for\u raw\u data\u（）

之前，将显示不需要翻译的元素

我已经检查了Chrome的开发工具和saw。它显示在

raw\u data\u Requests（）

之前执行

set\u language\u for\u raw\u data\u Requests（）

，但直到完成

raw\u data\u Requests（）

后才会显示

在执行

Raw\u Data\u 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>

checkLanguage（）：

SET翻译（语言）：

使用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_uu返回一个可观测值。然后你就可以订阅了。从observable完成的那一刻起，它将调用下一个函数

您可以在上找到完整的解释，但请花一些时间检查可观察对象的工作方式

我为翻译演示添加了一个超时：

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

显然，这足够显示/更新html了。

您可以使用rxjs或其他有承诺的框架。但如果同时显示两个函数的代码，则会更容易此

set\u language\u for\u raw\u data\u函数是否有返回值？什么类型？在set_language_中是否有针对_raw_data（）的异步调用；？我假设它会发生，因为您提到，在原始数据请求（）完成之前，它不会发生。您可以在set_language_中为_raw_data_uu（）设置断点；请包含两个函数的代码（为原始数据设置语言和原始数据请求），以便我们能够帮助您。@Roljhon不，没有。我会研究一下。非常感谢。
switch (language){
    default:
    case "en":
        d12="Show RAW data";
        t5="Real time measurements";
        t7="Version";
        t8="Cumulatives";
        t9="Error history";
        t11="Cycle history";
    break;
}

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_();
setTimeout(function(){
    Raw_Data_Requests();
}, 20);