＆QUOT; JScript的 - 脚本块QUOT;和内存泄漏 - 如何正确地释放资源？ [英] "JScript - script block" and memory leaks - How to freeing up resources properly?

查看：81
本文介绍了＆QUOT; JScript的 - 脚本块QUOT;和内存泄漏 - 如何正确地释放资源？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我把一些jQuery的标签我的项目的局部视图中。我注意到了Visual Studio的解决方案资源管理器，即调试过程中的新的动态的JScript - 脚本块产生的每一次点击一个新的标签在。

这是即使我把 $（'＃mytabs的.ui-标签隐藏'）儿童（）删除（）; 和 $空（）;标签的显示事件中（UI的选项卡隐藏）。
脚本块包含的JavaScript我把制表符叫做部分意见里面，这样的我每次点击一个previously点击标签，会出现一个新的JScript块：很明显，这导致稳定性问题或内存泄漏...例如，我已经注意到，一些定时器和绑定后，我两次加载一个标签不能正常工作。

我不知道，如果问题是由在调用包含脚本的局部视图的方式引起的。请注意我是如何设定的控制操作（指数的例子）。

这是我的环境：jQuery的1.6.4 - 的jQuery的UI 16年8月1日 - IE 8.0.7601
我能不能成功与其他浏览器进行调试，原因是Visual Studio似乎并不附加他们的流程，并且不显示动态数据...

控制器

下面是标签称为操作例子 

 公众的ActionResult指数（）
    {
         如果（Request.IsAjaxRequest（））
            返回PartialView（_指数）;        返回查看（）;
    }

这里是我的看法和脚本某些部分：

_Layout.cshtml 

  ....
 ＆LT; D​​IV ID =身体＆GT;
    @ Html.Partial（_ TabsMenu）;
 ＆LT; / DIV＆GT;
 ....

_TabsMenu.cshtml（包含选项卡菜单局部视图） 

 ＆LT; D​​IV ID =menutabs级=内容包装＆GT;
    ＆LT; UL＆GT;
        ＆LT;立GT; @ Html.ActionLink（家，索引，家庭）＆LT; /李＆GT;
        ＆LT;立GT; @ Html.ActionLink（测试，索引，测试）＆LT; /李＆GT;
         ...
    ＆LT; / UL＆GT;
 ＆LT; / DIV＆GT; ＆LT;脚本类型=文/ JavaScript的＆GT;
 $（函数（）{
     $（'＃menutabs'）。标签（{
         缓存：假的，
         显示：函数（事件，UI）{
             。$（'＃menutabs的.ui-标签隐藏'）儿童（）删除（）; //内容被删除，但剧本还在内存
             $（用户界面的选项卡隐藏），空（）; //内容被删除，但剧本还在内存
         }，
         选择：函数（事件，UI）{
             $（窗口）.unbind（）;
         }
     }）;
 }）;

（我甚至试图把脚本DIV ID里面，pheraps是愚蠢的，但我想看看是否DOM里面的脚本被删除......但没有）

Index.cshtml 

  @ {Html.RenderPartial（_指数）;}

_Index.cshtml（含部分问题的反复JScript的对象视图） 

 ＆LT;表ID =list4＆GT;＆LT; /表＆gt;
   ＆LT; jQuery的（＃list4）的jqGrid（{。
数据类型：本地，
高度：250，
colNames：['INV否，日期，客户，金额，税收，合计，注意]
colModel：
    {名称：'身份证'，索引：'ID'，宽度：60，sorttype：INT}，
    {名称：'invdate'，索引：invdate'，宽度：90，sorttype：日期}，
    {名称：'名'，索引：'名'，宽度：100}，
    {名称：'量'，索引：'量'，宽度：80，调整：右，sorttype：浮动}，
    {名称：'税'，索引：'税'，宽度：80，调整：右，sorttype：浮动}，
    {名称：'总'，索引：'总'，宽度：80，调整：右，sorttype：浮动}，
    {名称：'音符'，索引：'注意'，宽度：150，排序：假}
]
多选：真实，
标题：操控阵列数据}）;
            VAR MYDATA = [
    {ID：1，invdate：2007-10-01，名称：测试，注意：注意，金额：200.00，税10.00，总：210.00}，
    {ID：2，invdate：2007-10-02，名称：测试2，注：注2，金额：300.00，税20.00，总：320.00}，
    {ID：3，invdate：2007-09-01，名称：TEST3注：注3，金额：400.00，税30.00，总：430.00}，
    {ID：4，invdate：2007-10-04，名称：测试，注意：注意，金额：200.00，税10.00，总：210.00}，
    {ID：5，invdate：2007-10-05，名称：测试2，注：注2，金额：300.00，税20.00，总：320.00}，
    {ID：6，invdate：2007-09-06，名称：TEST3注：注3，金额：400.00，税30.00，总：430.00}，
    {ID：7，invdate：2007-10-04，名称：测试，注意：注意，金额：200.00，税10.00，总：210.00}，
    {ID：8，invdate：2007-10-03，名称：测试2，注：注2，金额：300.00，税20.00，总：320.00}，
    {ID：9，invdate：2007-09-01，名称：TEST3注：注3，金额：400.00，税30.00，总：430.00}
    ];
       对于（VAR I = 0;我LT＆= mydata.length;我++）
    jQuery的（＃list4）的jqGrid（'addRowData'，我+ 1，MYDATA [I]）。

更新

的JScript - 脚本块1..1 //这是我所看到的每一个里面的JScript - 脚本块，在调试过程......我testint jqGrid的。这是Trirand的网站一个演示。

 ＆LT;的jQuery（＃list4）的jqGrid（{
数据类型：本地，
高度：250，
colNames：['INV否，日期，客户，金额，税收，合计，注意]
colModel：
    {名称：'身份证'，索引：'ID'，宽度：60，sorttype：INT}，
    {名称：'invdate'，索引：invdate'，宽度：90，sorttype：日期}，
    {名称：'名'，索引：'名'，宽度：100}，
    {名称：'量'，索引：'量'，宽度：80，调整：右，sorttype：浮动}，
    {名称：'税'，索引：'税'，宽度：80，调整：右，sorttype：浮动}，
    {名称：'总'，索引：'总'，宽度：80，调整：右，sorttype：浮动}，
    {名称：'音符'，索引：'注意'，宽度：150，排序：假}
]
多选：真实，
标题：操控阵列数据}）;
            VAR MYDATA = [
    {ID：1，invdate：2007-10-01，名称：测试，注意：注意，金额：200.00，税10.00，总：210.00}，
    {ID：2，invdate：2007-10-02，名称：测试2，注：注2，金额：300.00，税20.00，总：320.00}，
    {ID：3，invdate：2007-09-01，名称：TEST3注：注3，金额：400.00，税30.00，总：430.00}，
    {ID：4，invdate：2007-10-04，名称：测试，注意：注意，金额：200.00，税10.00，总：210.00}，
    {ID：5，invdate：2007-10-05，名称：测试2，注：注2，金额：300.00，税20.00，总：320.00}，
    {ID：6，invdate：2007-09-06，名称：TEST3注：注3，金额：400.00，税30.00，总：430.00}，
    {ID：7，invdate：2007-10-04，名称：测试，注意：注意，金额：200.00，税10.00，总：210.00}，
    {ID：8，invdate：2007-10-03，名称：测试2，注：注2，金额：300.00，税20.00，总：320.00}，
    {ID：9，invdate：2007-09-01，名称：TEST3注：注3，金额：400.00，税30.00，总：430.00}
    ];
       对于（VAR I = 0;我LT＆= mydata.length;我++）
    jQuery的（＃list4）的jqGrid（'addRowData'，我+ 1，MYDATA [I]）。


解决方案

这是由浏览器解析脚本是不是在DOM，你可以不是删除了 - 变量仍定义，事件仍在束缚，方法仍然存在。如果你把的JavaScript到您反复加载的局部视图，你会得到的JavaScript反复。

您需要做的是编写你的JavaScript，以更加适应这一点。如果你绑定事件的元素动态区域外 - 没有。你会多次绑定他们。此举code的地方只会加载一次。尽量保持在JavaScript的隔离动感地带，因此只能与同样在动态区域要素交易。

您还可以防止多种定义，简单的，如果检查，使用jQuery选择更多的作用域等等。

如果没有什么在反复块的细节，并没有太多我可以提供。

I put some jquery tabs inside a partial view of my project. I noticed by Visual Studio's "Solution Explorer", that during debug a new dynamic JScript - script block is generated every time I click on a new tab.

This happens even if I put $('#mytabs .ui-tabs-hide').children().remove(); and $(".ui-tabs-hide").empty(); inside show event of the tabs. Script blocks contains javascript i put inside the partial views called by tabs, so every time I click a previously clicked tab, a new JScript block appears: it is evident that this leads to problems of stability or memory leaks...for example, I already noticed that some timers and bindings do not work properly after I load twice a tab.

I do not know if the problem is induced by the way in which call the partial views containing the scripts. Please be careful how I set the controller actions (Index in the example).

This is my environment: jquery 1.6.4 - jquery-ui 1.8.16 - IE 8.0.7601 I cannot succeed to debug with other browsers, because Visual Studio does not seems to attach their processes and does not show dynamic data...

CONTROLLER

Here is an action example called by the tabs

  public ActionResult Index()
    {
         if (Request.IsAjaxRequest())
            return PartialView("_Index");

        return View(); 
    }

Here are some parts of my views and scripts:

_Layout.cshtml

 ....
 <div id="body">  
    @Html.Partial("_TabsMenu");
 </div>
 ....

_TabsMenu.cshtml (Partial view containing the tabs menu)

 <div id="menutabs" class="content-wrapper">
    <ul >
        <li>@Html.ActionLink("Home", "Index", "Home")</li>
        <li>@Html.ActionLink("Test", "Index", "Test")</li>
         ...
    </ul>
 </div>

 <script type="text/javascript">
 $(function () {
     $('#menutabs').tabs({
         cache: false,
         show: function (event, ui) {
             $('#menutabs .ui-tabs-hide').children().remove(); // the content is removed , but the script is still in memory
             $(".ui-tabs-hide").empty(); // the content is removed, but the script is still in memory
         },
         select: function (event, ui) {
             $(window).unbind(); 
         }
     });
 });

(I even tried to put script inside div id, pheraps is silly, but I wanted to see if the script inside the DOM was removed...but nothing)

Index.cshtml

  @{Html.RenderPartial("_Index");}

_Index.cshtml (partial view containing the repeated jscript object of the question)

   <table id="list4"></table>
   <jQuery("#list4").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
    {name:'id',index:'id', width:60, sorttype:"int"},
    {name:'invdate',index:'invdate', width:90, sorttype:"date"},
    {name:'name',index:'name', width:100},
    {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
    {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},     
    {name:'total',index:'total', width:80,align:"right",sorttype:"float"},      
    {name:'note',index:'note', width:150, sortable:false}       
],
multiselect: true,
caption: "Manipulating Array Data"});
            var mydata = [
    {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
    {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
    {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
    ];
       for(var i=0;i<=mydata.length;i++)
    jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);

Updated

JScript - script block 1..N // this is what I see inside each JScript - script block, during debugging... I am testint jqgrid. This is a demo from Trirand's site.

     <jQuery("#list4").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
    {name:'id',index:'id', width:60, sorttype:"int"},
    {name:'invdate',index:'invdate', width:90, sorttype:"date"},
    {name:'name',index:'name', width:100},
    {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
    {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},     
    {name:'total',index:'total', width:80,align:"right",sorttype:"float"},      
    {name:'note',index:'note', width:150, sortable:false}       
],
multiselect: true,
caption: "Manipulating Array Data"});
            var mydata = [
    {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
    {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
    {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
    ];
       for(var i=0;i<=mydata.length;i++)
    jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);

解决方案

Script that's parsed by a browser is not in the DOM, and you can't "remove" it - variables are still defined, events are still bound, methods are still there. If you put javascript into a partial view that you load repeatedly, you're going to get that javascript repeatedly.

What you need to do is author your javascript to be more resilient to this. If you're binding events to elements outside of the dynamic area - don't. You'll be binding them multiple times. Move that code somewhere it will only be loaded once. Try to keep the javascript in the dynamic area isolated so it only deals with elements that are also in the dynamic area.

You can also protect against multiple definitions with simple if checks, using jquery selectors that more scoped, etc.

Without the details of what's in that repeated block, there's not much I can offer.

这篇关于＆QUOT; JScript的 - 脚本块QUOT;和内存泄漏 - 如何正确地释放资源？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
ASP .NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆