刷新内容不刷新页面

Question

你好我已经开发了使用socket.io，expressjs和猫鼬它的工作正常的聊天应用程序。它会在几秒钟后刷新并从db中提取新的客户端（如果存在）。问题在于用户可以感觉到div是正在刷新的，并且还有一段时间需要时间来回应。如何避免这种情况。这里是我的代码 这是我的服务器端代码

setInterval(function() { 
    var allOnLine; 
    allOnLine = io.sockets.clients(); 
    for (var client in allOnLine) { 
    if (allOnLine[client].username == "undefined") { 
    continue; 
    } else { 
    notifyAll(allOnLine[client].username); 
    } 
} 
}, 50000); 

，这里是通知所有方法

function notifyAll(userName) { 
     contactModel.find({'userId':userName}, (function (err, contactModel) { 
     usernames = []; 
     var contacts = contactModel; 
     for (var a = 0; a < contacts.length; a++) { 
      usernames[a] = contacts[a].contactId; 
     } 
     var allOnLine; 
     allOnLine = io.sockets.clients(); 
     for (var client in allOnLine) { 
      if (allOnLine[client].username == "undefined") { 
       continue; 
      } else { 
       for (var i = 0; i < usernames.length; i++) { 
        if (allOnLine[client].username == usernames[i]) { 
         usernames[i] = usernames[i] + " -On"; 
        } 

     allOnLine[client].username); 
       } 

      } 
     } 
     io.sockets.to(userName).emit('updateusers', usernames); 

     })); 
    } 

这是我的客户端代码

socket.on('updateusers', function(usernames) { 
    jQuery('#usernames').html(''); 
    jQuery.each(usernames, function(key, value) { 
     jQuery('#usernames').append('<div class="chatContact" id="chatLink" onclick="privateChat(\''+value+'\')">'); 
}} 

任何帮助我也发布了这个问题，但没有回答

Answer 1

你的问题是你删除了用户名和所有联系人之后的所有内容。您最好从$（'＃用户名'）中删除脱机联系人，然后将该联系人添加到该列表中。我编写了一些函数来显示功能。我创建了在线联系人的html列表，并且我还创建了一系列新的在线联系人。下面是代码：

<div id="u"> 
    <div class="d" onclick="chat('asd1')">asd1</div> 
    <div class="d" onclick="chat('asd12')">asd12</div> 
    <div class="d" onclick="chat('asd13')">asd13</div> 
    <div class="d" onclick="chat('asd142')">asd14</div> 
</div> 

在这里，你有你需要运行后DOM准备好了的javascript：

var onlineUsernames = ["asd211","asd12","asd13","asd14"]; 
var usernamesContainerID = 'u'; 
var $usernamesContainer = $('#'+usernamesContainerID); 
function extractUsernameFromAttr(onclickValue) 
{ 
    return onclickValue.split("'")[1]; 
} 
function buildExistingUsernames($userDivs) 
{ 
    var existingUsernames = []; 
    $userDivs.each(function(index,value){ 
    var username = extractUsernameFromAttr($userDivs[index].getAttribute('onclick')); 
    existingUsernames.push(username); 
    }) 
    return existingUsernames; 
} 
function removeUserFromList($user) 
{ 
    document.getElementById(usernamesContainerID).removeChild($user); 
} 
function addUserToList(value) 
{ 
    $('<div/>',{ 
     onclick:"chat('"+value+"')", 
     class :'d', 
     text:value 
    }).appendTo($usernamesContainer); 
} 

function deleteOfflineContacts(existingUsernames,usernames,$userDivs) 
{ 
    $.each(existingUsernames,function(index,value) 
    { 
    if($.inArray(value,usernames)==-1) 
    { 
     removeUserFromList($userDivs[index]); 
    }  
    }) 
} 
function addOnlineContacts(existingUsernames,usernames) 
{ 
$.each(usernames,function(index,value) 
    { 
    if($.inArray(value,existingUsernames)==-1) 
    { 
     addUserToList(value); 
    }   
    }) 

} 
function update($userDivs) 
{ 
    var existingUsernames = buildExistingUsernames($userDivs); 
    deleteOfflineContacts(existingUsernames,onlineUsernames,$userDivs); 
    addOnlineContacts(existingUsernames,onlineUsernames); 
} 
var $userDivs = $usernamesContainer.children("div"); 
setTimeout(function() 
{ 
    update($userDivs); 
},3000); 

如果你需要在这里是一个工作示例：http://jsfiddle.net/9gRyQ/2/