Javascript 自动刷新内容 - 缺少数据答案

【问题标题】：Javascript Auto-Refresh content - missing dataJavascript 自动刷新内容 - 缺少数据
【发布时间】：2022-02-04 08:01:16
【问题描述】：

您好，我确实有需要每 5 秒刷新一次的数据，但刷新后我无法检索该值。我试过这个：首先，我使用了刷新功能：

$(document).ready(function(){
    $('#div_refresh').load("userdetail.html");
        setInterval(function(){
            $('#div_refresh').load("userdetail.html")
}, 5000);
});

它正在加载 + 刷新我的 DIV，根据 HTML (userdetail.html)

<html>
<p>Username: <span id="Name"></span></br>
    Routing Profile: <span id="routingProfile"></span></br>
    Agent State: <span id="State"></span></br>
    State TimeStamp: <span id="TimeStamp"></span></br>
    State Duration: <span id="Duration"></span></p>
</html>

这是有效的，DIV 正在刷新，但是，在第一次刷新通过脚本填充的所有数据后：

    /* agent.js */
        connect.agent(function(agent) {
            document.getElementById("Name").innerHTML = agent.getName();
            document.getElementById("routingProfile").innerHTML = agent.getRoutingProfile().name;
            document.getElementById("State").innerHTML= agent.getState().name;
            document.getElementById("TimeStamp").innerHTML = agent.getState().startTimestamp;
            document.getElementById("Duration").innerHTML = agent.getStateDuration();
        });

不再出现，它只是返回名称中的段落，但 'span' 值不会。在我的主要 HTML (index.html) 上，这是设置它的方式：

 <div id="div_refresh"></div>
 <script id="agent" type="text/javascript" src="./agent.js"></script>
 <script src="./reload.js"></script>

这是刷新和 span 数据消失之前的样子 https://iili.io/c6p8pS.png 有什么想法吗？

【问题讨论】：

你的 sn-p 不完整（没有 HTML，声明 jQuery）
另外，我建议“在”最后一个之后“每 5 秒”，因为这样做可能需要 5 秒以上 - 使用 Promise 来做到这一点developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - jQuery ajax BTW 返回一个保证你可以利用它来相当简单地做到这一点

标签： javascript html jquery amazon-s3 amazon-connect

【解决方案1】：

另一种方法是在流中触发 agent.onRefresh 事件上的函数，而不是每 x 秒重新加载 div。比如……

connect.agent(async function (agent) {

  agent.onRefresh(handleAgentRefresh);

});

function handleAgentRefresh(agent) {
  var changedRoutingProfileName = agent.getRoutingProfile().name;
  if (changedRoutingProfileName != document.getElementById('routingProfile').innerHTML ) {
    document.getElementById('routingProfile').innerHTML = changedRoutingProfileName ;
  }
}

这样，当流报告它已更改时，路由配置文件名称将自动更新。而且你根本不需要重新加载。

【讨论】：

【解决方案2】：

这是完全未经测试的，实际上不会在这里运行。使用 Promise，我们可以得到结果，将它们粘贴进去，然后在“代理”事物上完成之后，然后在 5 秒后触发它重新开始。

FWIW，我更改了 id，因为“#divxxx”使 id 与标签匹配不是一个好习惯。我还使用了一些 CSS 并删除了您无效的 </br> 并使用 CSS 来设置样式 - 但这不是您的问题的一部分，更多的是我使用 CSS 对其进行格式化。

$(function() {
  function fetchMe(url) {
    return jQuery.ajax(url, {
      type: 'GET',
      dataType: 'html'
    });
  }

  $('#refreshed-content').on("go-get-another", function() {
      $.when(fetchMe('userdetail.html'))
        .then(function(results) { // Resolve
          $('#refreshed-content').html(results.data);
        }, function() { // Reject!
          console.log('Something broke!');
        }).then(function() {
          // you decide if this is the right place to go get what was pasted in: I have less experience with this area.
          connect.agent(function(agent) {
            document.getElementById("Name").innerHTML = agent.getName();
            document.getElementById("routingProfile").innerHTML = agent.getRoutingProfile().name;
            document.getElementById("State").innerHTML = agent.getState().name;
            document.getElementById("TimeStamp").innerHTML = agent.getState().startTimestamp;
            document.getElementById("Duration").innerHTML = agent.getStateDuration();
          });
        })
        // set a 5 second delay then trigger next load
        .then(value =>
          new Promise(resolve =>
            setTimeout(() => resolve(value), 5000)
          )
        ).then(function() {
          $('#refreshed-content').trigger('go-get-another');
        });
    })
    // start the ball rolling:
    .trigger('go-get-another');
});

.content-block {
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  flex-direction: coumn;
}

.content-row {
  display: block;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="refreshed-content" class="content-block">
  <div class="content-row user-name">Username:<span id="Name"></span></div>
  <div class="content-row"> Routing Profile:<span id="routingProfile"></span></div>
  <span class="content-row"> Agent State:<span id="State"></span></span>
  <p class="content-row"> State TimeStamp:<span id="TimeStamp"></span></p>
  <div class="content-row"> State Duration:<span id="Duration"></span></div>
</div>

【讨论】：