JQuery setInterval with append，增加内存

Question

抱歉我的英语不好。

我用jQuery创建了一个聊天系统，当我尝试替换内容时（比如用户在线 - 离线或收到的消息），它工作得很好但开始变得越来越慢，导致javascript开始越来越多存储器中。

$(document).ready(function(e) {
data = '<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>';

$("body").empty().append(data);

setInterval(function(){
    $("body").empty().append(data);
    }, 1000);

}); //document

在Google Chrome中进行测试（我无法在此处发布图片，因为我是新手）。随着时间轴记忆越来越多地出现，并且节点（绿线）始终作为台阶褶皱。

我测试过：

document.getElementById("selector_inthiscasetheidofthebody").innerHTML="";

然后

document.getElementById("selector_inthiscasetheidofthebody").innerHTML=data;

• 我使用了setTimeout

的setInterval方法

• 我尝试使用html() jQuery方法

这是图片：

还有其他想法吗？感谢。

Answer 1

我找到了它！ 你不能避免增加内存和节点，但你可以控制它们！ 这是代码：

    $(document).ready(function(e) {

// Possible data    
data = '<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>';

// Clean all that browsers changes, like putting styles inline, etc. Data and html appened, must be the same
function clean(a){
    if((a != 'undefined') && (a != null)){
    a = a.replace(/(\ style=".*?")/gi,'').replace(/(<tbody>)/gi,'').replace(/(<\/tbody>)/gi,'').replace(/(\&amp\;)/gi,'&').replace(/(\&lt\;)/gi,'<').replace(/(\&gt\;)/gi,'>').replace(/(\")/gi,"'");
    return a.trim();
    }
    };

// If they are different, then append data. So, you only append data in case information changes.
function inyectar(a,b){
    if(clean($(a).html()) != clean(b)){
        $(a).empty().append(b);
        }
    }

setInterval(function(){
    inyectar("body",data);
        }, 1000);
});