时间戳

首页 > 解决方案 > 自动刷新 Div 容器

javascript - 自动刷新 Div 容器

问题描述

我的功能如下： document.getElementById("IR_0_ph").innerHTML = sent_dict["IR_0"];

我得到这样的信息：h2 id="IR_0_ph" class="number">0</h2> 一切正常，但他不能自动更新信息，如果我手动重新加载页面一切都很好，但我需要自动更新此信息。mb 我可以只刷新主 Div 容器或....？

function data_handler(sent_dict) {
  socket.emit("control_event", {
    data: "Hello!"
  }); // tell the RPI that the wifi connection is still working
  
  document.getElementById("IR_0_ph").innerHTML = sent_dict["IR_0"];
  document.getElementById("IR_1_ph").innerHTML = sent_dict["IR_1"];
  document.getElementById("IR_4_ph").innerHTML = sent_dict["IR_4"];
  document.getElementById("IR_Yaw_right_ph").innerHTML = sent_dict["IR_Yaw_right"];
  document.getElementById("IR_Yaw_left_ph").innerHTML = sent_dict["IR_Yaw_left"];
  document.getElementById("Yaw_ph").innerHTML = sent_dict["Yaw"];
  document.getElementById("p_part_ph").innerHTML = sent_dict["p_part"];
  document.getElementById("alpha_ph").innerHTML = sent_dict["alpha"];
  document.getElementById("Kp_ph").innerHTML = sent_dict["Kp"];
  document.getElementById("Kd_ph").innerHTML = sent_dict["Kd"];
  document.getElementById("blue_percentage_ph").innerHTML = sent_dict["blue_percentage"];

  stored_state = document.getElementById("state_table_1_ph").innerHTML;
  new_state = sent_dict["AUTO_STATE"];
  if (new_state != stored_state) {
    insert_into_state_table_ph(new_state);
  }

  document.getElementById("manual_state_ph").innerHTML = sent_dict["manual_state"];
  document.getElementById("mode_ph").innerHTML = sent_dict["mode"];
}
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-lg-3">
      <div class="statistic__item">
        <h2 id="IR_0_ph" class="number">unknown</h2>
        <span class="desc">FRONT SIDE</span>
        <div class="icon">
          <i class="zmdi zmdi-account-o"></i>
        </div>
      </div>
    </div>
  </div>
</div>

标签： javascripthtml

解决方案

1）如何从什么方式调用data_handler函数，它是从某个异步流调用还是它只是一个一次性调用函数。

2) sent_dict 来自哪里？

不确定您是如何调用的，以及 sent_dict 数据如何传递给 dataHandler 函数。假设 sent_dict 是服务器调用或设备响应。

有两个用例或场景：

1）调用一次。例子：

   ajaxCall.then(sent_dict =>   data_handler(sent_dict));

如果是，请使用 javascript 的 setTimeout 函数间隔执行 ajax 调用。设置超时（ajaxCall，interval_time）。或者您可以使用可观察区间运算符来模拟相同的行为而无需做太多事情。每次从服务器获得响应时，它将自动更新 div。

2）如果它不止一次调用或基于间隔的调用。以下代码不足以回答您的问题。

推荐阅读