JQuery的的setInterval与追加，增加内存 [英] JQuery setInterval with append, increase memory

问题描述

对不起，我英文不好。

我创建了一个聊天系统使用jQuery，当我试图取代内容（如用户在线，离线或消息recived）它的作品完美，但开始被越来越慢，导致JavaScript开始采取越来越多的内存。

I've created a chat system with jQuery and when i try to replace contents(like users online-offline or messages recived) it works perfectly but start to be more and more slowly, cause javascript start to take more and more the memory.

$(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

测试谷歌浏览器（因为我是新的，我不能在这里发表图片）。出现在时间轴内存越来越多，和节点（绿线）作为压痕楼梯，所有的时间。

Testing in Google Chrome (I can't post images here cause I'm new). Appears in Timeline Memory more and more, and Nodes(green line) creasing as stairs to, all the time.

我已经测试：

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

然后

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

• 我用的setTimeout 方法insted的的的setInterval

  • I've used setTimeout method insted of setInterval

    我试着 HTML（） jQuery的方法

    I've tried with html() jQuery method

    这是图像：

    

    任何其他的想法？谢谢你。

    Any other ideas? Thanks.

    推荐答案

    我找到了！
    你无法避免增加内存和节点，但你可以控制他们！
    这是code：

    I've found it! You can't avoid increasing memory and nodes but you can control them! This is the code:

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

    这篇关于JQuery的的setInterval与追加，增加内存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！