錯誤的輸出時間腳本行爲

Question

我從json文件中獲取數據。他們有這種形式（這是消息）。

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

（以秒爲 「時間」）

腳本應該只顯示了一個小時的消息。它這樣做，但它在屏幕上顯示的時間不正確。

它應該是這樣的：用戶轉到頁面，他看到消息在最後一小時，他重寫，所有新消息都顯示出來。

但我得到這樣的消息，在過去的時間顯示錯誤的時間，另外消息的輸出是不正確的。

所有信息均顯示在最後一小時，但我需要一個新的消息立即和不顯示出，如果他們已經被證明（因爲它是現在）

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

.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.爲什麼時間顯示不正確？

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值轉換爲毫秒（像之前），並計算時也使用時間差。在確定消息處於可接受的時間窗口之後，從time_ms創建一個新的Date對象以獲取正確的時間戳顯示。