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

问题描述

抱歉我的英语不好.

我用 jQuery 创建了一个聊天系统，当我尝试替换内容(如用户在线-离线或收到的消息)时，它运行良好，但开始变得越来越慢，导致 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

在 Google Chrome 中测试(我不能在这里发布图片，因为我是新手).越来越多的出现在时间轴内存中，节点(绿线)一直像楼梯一样折痕.

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;

• 我使用了 setInterval

  我已经尝试过 html() jQuery 方法

  I've tried with html() jQuery method

  这是图片:

  还有其他想法吗?谢谢.

  Any other ideas? Thanks.

  推荐答案

  我找到了！您无法避免增加内存和节点，但您可以控制它们！这是代码:

  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 with append，增加内存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！