Question

我从json文件中获取数据。他们有这种形式（这些是消息）。

[
    {
        "time": "1499877171",
        "user": "qwe",
        "message": "qwe"
    },
    {
        "time": "1499877174",
        "user": "qwe",
        "message": "qwe"
    },
    {
        "time": "1499877175",
        "user": "qwe",
        "message": "qwe"
    }
]

（＆＃34;时间＆＃34;秒）

脚本应该只显示过去一小时的消息。它这样做，但它在屏幕上显示的时间不正确。

它应该是这样的：用户进入页面，他在最后一小时看到消息，他重写，显示所有新消息。

但我得到的结论是，过去几小时的消息显示的时间错误，另外还有消息的输出不正确。

所有消息都显示在最后一小时，但是我需要立即显示新消息，如果已经显示（现在就是这样），则不显示消息

＆＃13;

$.getJSON('data/messages.json', callback);
//I take messages from the file
callback([
    {
        "time": "1499877171",
        "user": "qwe",
        "message": "qwe"
    },
    {
        "time": "1499877174",
        "user": "qwe",
        "message": "qwe"
    },
    {
        "time": "1499877175",
        "user": "qwe",
        "message": "qwe"
    }
]);
function callback(respond) {
  setTimeout(function tick() {
    for (var i = 0; i < respond.length; i++) {
      var data = respond[i];
      var now = Date.now();
      var diff_time = Math.floor(now - ((data.time) * 1000));
      if (diff_time <= 3600000) {
        var new_date = new Date(diff_time);
        var res = [new_date.getHours(), new_date.getMinutes(), new_date.getSeconds()].map(function(x) {
          return x < 10 ? "0" + x : x;
        }).join(":");
        var rowClone = $('.mess_hide').clone().removeClass('mess_hide');
        $('#messages').append(rowClone);
        $('.time', rowClone).html(res);
        $('.name', rowClone).html(data.user);
        $('.message', rowClone).html(data.message);
        $('.scroller').scrollTop($('#messages').height());
      }
    }
    setTimeout(tick, 3600000);
  }, 1);
}

＆＃13;

.scroller {
  width: 490px;
  height: 255px;
  max-height: 255px;
  overflow-y: auto;
  overflow-x: hidden;
}

table#messages {
  min-height: 260px;
  width: 100%;
  background: #fffecd;
  border: none;
}

table#messages::-webkit-scrollbar {
  width: 1em;
}

table#messages::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

table#messages::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

tr {
  height: 20%;
  display: block;
}

td.time,
td.name {
  width: 70px;
  max-width: 75px;
  text-align: center;
}

td.name {
  font-weight: bold;
}

form#text_submit {
  display: inline-flex;
  align-items: flex-start;
}

input#text {
  width: 370px;
  height: 30px;
  margin-top: 20px;
  background: #fffecd;
  font-family: 'Montserrat';
  font-size: 16px;
  border: none;
  align-self: flex-start;
}

input#submit {
  padding: 0;
  margin-left: 21px;
  margin-top: 21px;
  height: 30px;
  width: 95px;
  background: #635960;
  border: none;
  color: white;
  font-family: 'Montserrat';
  font-size: 16px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroller">
  <table id="messages">
    <tr class="mess_hide">
      <td class="time"></td>
      <td class="name"></td>
      <td class="message"></td>
    </tr>
  </table>
</div>
<form method="POST" id="easyForm">
  <input type="text" name="text" id="text">
  <input type="submit" value="Send" id="submit">
</form>
</div>

＆＃13;

所以，我有两个小问题：

1.为什么时间显示不正确？

2.如何检查：此消息是否已显示？

Answer 1

根据charlietfl的评论，您需要在显示每条消息时存储一些标识符，然后在显示消息之前检查该列表。如果您控制提供json数据的系统，则可以在那里进行跟踪，然后仅提供需要在json数据中显示的消息。显示消息时，更新跟踪机制以指示消息已显示。（问题很广泛，所以答案也是如此）。

关于日期显示问题，我认为这一行可能会引起麻烦：

var new_date = new Date(diff_time);

您正在根据两个日期之间的差异创建新的Date。相对于表示当前日期/时间的类似值，diff_time的值将“非常小”。您可能想要做的是这样的事情（上下文显示几行）：

....
var now = Date.now();
var time_ms = data.time * 1000;              // Convert to milliseconds
var diff_time = Math.floor(now - time_ms);   // Calculate difference
if (diff_time <= 3600000) {                  // Check range
    var new_date = new Date(time_ms);        // Create Date from milliseconds
    ....

请注意，json数据中的time值将转换为毫秒（与之前相同），并在计算时差时使用。在确定消息处于可接受的时间窗口后，从Date创建一个新的time_ms对象以获得正确的时间戳显示。

输出时间的错误脚本行为

1 个答案: