• setInterval、ajax 并用引发的内存漏泄


    这两天在做一个小功能:通过 setInterval 定时通过 ajax 从后台获取最新数据,再更改浏览器标题,并通过走马灯的方式显示出来。具体代码如下:

    (function()
    {
        titleMain();
        var id
    =window.setInterval(titleMain,10000);
        var id2;
        
        function titleMain()
        {
            
    //console.log(id);
            
    //console.log(id2);
            if(id2!=undefined)
            {
                window.clearInterval(id2);
            }
            $.ajax({
               type: 
    "POST",
               url: 
    "__URL__/ajaxTitle/",
               success: success
            });  
        }
        
        function success(title)
        {
            var num 
    = title.length,i = 0;
            id2
    =window.setInterval(titleHandle,200);
            
    //console.log("id2:"+id2);
            
            function titleHandle()
            {
               
    if(i>num)
                  
    return (i=0);
               document.title 
    = title.substr(i);
               i
    ++;
            }
        }
        
    })();


    功能要实现起来并不难,但有个问题就是存在内存漏泄。一开始我怀疑是第二个套用的 setInterval 引起的,于是将那部分相关的代码注释掉。再观察内存变化情况,同样存在刚才所说的内存问题。
    很明显示是不断重复执行 ajax 引起的。自己找不出解决的办法,于是 google 看是否也有人遇到我这样的情况的。找到一篇文章说是 ajax 创建时 new ActiveXObject 导致内存不断增长的(Link)。文中所说的方法是将 ajax 缓存起来,这样就不用每次都创建 new ActiveXObject 对象了,由于我用的代码是 jquery 框架里的,不知怎样缓存。再是决定用原生 javascript 来实现。修改后代码如下:

    (function()
    {
        var ajax 
    = createAjax();
        titleMain();
        var id
    =window.setInterval(titleMain,10000);
        var id2;
            
        function titleMain()
        {
            
    //console.log(id);
            
    //console.log(id2);
            if(id2!=undefined)
            {
                window.clearInterval(id2);
            }        
            
            ajax.open(
    "POST""__URL__/ajaxTitle/"true);
            ajax.onreadystatechange 
    = success;
            ajax.send(
    null);    
        }
        
        function success()
        {
            
    if (ajax.readyState == 4)
            {
                
    if (ajax.status == 200)
                {
                    
    //return;
                    
    //alert(ajax.responseText);
                    var title = ajax.responseText;
                    var num 
    = title.length,i = 0;
                    
                    function titleHandle()
                    {
                       
    if(i>num)
                          
    return (i=0);
                       document.title 
    = title.substr(i);
                       
    if(window.parent!=undefined)
                           window.parent.document.title 
    = document.title;
                       i
    ++;
                    }
                    
                    id2
    =window.setInterval(titleHandle,200);
                    
    //console.log("id2:"+id2);
                    
                }
            }
        }
        
    })();

    这样修改后再通过 sIEve 来查看内存泄漏情况(如下图),我观察了很长时间都没有发现内存的大幅增加,只是比较平稳的增加一点点。由此可以得出结论这个问题已经得到比较好的解决。

  • 相关阅读:
    javascript数据结构与算法---二叉树(查找最小值、最大值、给定值)
    javascript数据结构与算法---检索算法(二分查找法、计算重复次数)
    javascript数据结构与算法---检索算法(顺序查找、最大最小值、自组织查询)
    javascript数据结构与算法--高级排序算法(快速排序法,希尔排序法)
    ThinkPHP5中Session的使用
    能让你少写1000行代码的20个正则表达式
    composer 安装
    thinkphp5.0 实现图片验证效果且能点击图片刷新图片
    thinkphp5.0 实现单文件上传功能
    thinkphp5.0 输入变量
  • 原文地址:https://www.cnblogs.com/chy1000/p/1845694.html
Copyright © 2020-2023  润新知