Неверный вывод времени js

280

14 июля 2017, 04:45

Я получаю данные из json-файла. Они имеют вид массива обьектов(это сообщения).

[
    {
        "time": "1499882893",
        "user": "qwe",
        "message": "q"
    },
    {
        "time": "1499882894",
        "user": "qwe",
        "message": "w"
    },
    {
        "time": "1499882895",
        "user": "qwe",
        "message": "e"
    }
]

(«time» в секундах)

Скрипт должен отображать только сообщения за последний час. Он делает это, но время, отображаемое на экране, неверно.

Это должно работать примерно так: пользователь переходит на страницу, он видит сообщения за последний час, он переписывается, а на экране отображаются все новые сообщения.

Но я получаю так, что сообщения за последний час показываются с неправильным временем(где то ошибка в обработке времени обратно в читаемый вариант) и, кроме того, вывод сообщений не правильный ибо при загрузке сообщений с из файла(если прошло меньше часа) загрузятся все сообщения, даже если они и были загружены ранее.

Сообщения отображаются в последний час, но мне нужно, чтобы новые сообщения отображались сразу и не отображались, если они уже были показаны (как сейчас)

callback([{ 
    "time": "1499882893", 
    "user": "qwe", 
    "message": "q" 
  }, 
  { 
    "time": "1499882894", 
    "user": "qwe", 
    "message": "w" 
  }, 
  { 
    "time": "1499882895", 
    "user": "qwe", 
    "message": "e" 
  } 
]); 
 
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); 
}

.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; 
}

<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>

Итак, у меня есть два небольших вопроса:

1.Когда мы нашли diff_time стоит условие, если оно меньше 3600000 то код выполняется(выполняется запись). Но я пытаюсь вывести разницу вместо того что бы вывести само время сообщения.Как реализовать цикл для всех тех diff_timeкоторые меньше 3600000 что бы выводило их время?

2.Как я могу сделать проверку: было ли уже загружено это сообщение?

Answer 1

Дело в том, что когда вы делаете дату из таймстампа, таймстамп считается по гринвичу, а получившаяся дата - в локальной таймзоне. В итоге, вы хотели посчитать разницу между двумя таймстампами, а получили непонятно откуда взявшиеся 4 часа) Чтобы такого не было, при относительных расчетах со временем пользуйтесь UTC временем.

let diff = new Date(0); // Ваша разница между двумя датами в ms 
console.log(diff.getHours()); // 4 часа ночи 1 января 1970 года по мск 
console.log(diff.getUTCHours()); // то что надо