jquery - 使用 jQuery 的实时消息
问题描述
window.setInterval(function(){
$.post ('<?php echo base_url(); ?>ClientCont/List_Files/fetchmessage',
{
id:folderid
},
function(data){
console.log(data);
if(data.length > 0){
var a;
for(a = 0; a < data.length; a++){
$('#previouscomment').append("<div id = 'dateconvo' style = 'margin-top:20px;text-align:center;color:#D3D3D3'>" + data[a]['date_entry'] + "</div><br>" +
"<input id = 'oldid' type = 'hidden' value = " + data[a]['comment_id'] + ">" +
"<div id = 'usernamemessage' style = 'color:#D3D3D3'>" + atob(data[a]['name_user']) + "</div>" +
"<div id = 'messageme' style = 'margin-left:10px;margin-top:10px;border-radius: .4em;background-color: #4CAF50!important; border-radius: 5px;box-shadow: 0 0 6px #B2B2B2; display: inline-block;padding: 10px 18px;position: relative;vertical-align: top;color:#FFFFFF'>" +
data[a]['message']) + "\n";
}
}else{
$('#previouscomment').append("<div align = 'center' style = 'margin-top:30px;color:#D3D3D3'><img src = '<?php echo base_url();?>assets/images/nocommentyet.png' align = 'middle' style = 'height:100px;width:100px;'/>" + "<br>NO COMMENT TO DISPLAY</div>");
}
$("#previouscomment").animate({ scrollTop: "2000000000000px" }, "fast");
},
'json'
);
},1000);
我有以下代码,但不幸的是,它每分钟都会附加消息......甚至是以前附加的消息。
我只想问如何避免每次执行代码时消息的冗余。它应该只获取新消息。
解决方案
在您的代码中,您定义了读取所有对象作为响应的循环,并且每个附加元素都没有唯一的 id,因此我们将为每个附加的 div 分配一个唯一的 id,我们将从您的响应中获得案例我们将使用comment_id
并且在追加之前我们将检查该元素是否存在
window.setInterval(function() {
$.post('<?php echo base_url(); ?>ClientCont/List_Files/fetchmessage', {
id: folderid
}, function(data) {
console.log(data);
if (data.length > 0) {
var a;
for (a = 0; a < data.length; a++) {
if ($('#dateconvo' + data[a]['comment_id']).length == 0) {
$('#previouscomment').append("<div id = 'dateconvo" + data[a]['comment_id'] + "' style = 'margin-top:20px;text-align:center;color:#D3D3D3'>" + data[a]['date_entry'] + "</div><br>" +
"<input id = 'oldid' type = 'hidden' value = " + data[a]['comment_id'] + ">" +
"<div id = 'usernamemessage' style = 'color:#D3D3D3'>" + atob(data[a]['name_user']) + "</div>" +
"<div id = 'messageme' style = 'margin-left:10px;margin-top:10px;border-radius: .4em;background-color: #4CAF50!important; border-radius: 5px;box-shadow: 0 0 6px #B2B2B2; display: inline-block;padding: 10px 18px;position: relative;vertical-align: top;color:#FFFFFF'>" +
data[a]['message']) + "\n";
}
}
} else {
$('#previouscomment').append("<div align = 'center' style = 'margin-top:30px;color:#D3D3D3'><img src = '<?php echo base_url();?>assets/images/nocommentyet.png' align = 'middle' style = 'height:100px;width:100px;'/>" + "<br>NO COMMENT TO DISPLAY</div>");
}
$("#previouscomment").animate({
scrollTop: "2000000000000px"
}, "fast");
}, 'json');
}, 1000);
推荐阅读
- sql - SQL:将两个表挂在另一个表的键上,没有所有组合
- javascript - 如何使用 jquery/javascript 或 angular 2/4 解码 sha 256 编码字符串?
- ios - 来自客户的 Apple App Store 证书
- javascript - javascript函数返回失败
- django - 使用参数从管理员执行管理命令
- java - 以 OO 方式装帧真实尺寸
- css - 如何仅使用 grid 和 justify-content 类自定义 Bootstrap 4?
- javascript - 如果我使用 redux 进行状态管理,我应该在本地存储状态吗?
- r - 汇总日期的开始和结束
- android - Viewpager里面的Viewpager滚动问题