刷新內容不刷新頁面

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/