jquery - "JScript - script block"和内存泄漏 - 如何正确释放资源？

Question

我在项目的部分 View 中放置了一些 jquery 选项卡。我通过 Visual Studio 的“解决方案资源管理器”注意到，在调试期间每次单击新选项卡时都会生成一个新的动态 JScript - 脚本 block 。

即使我输入 $('#mytabs .ui-tabs-hide').children().remove(); 和 $(".ui-tabs-hide')，也会发生这种情况hide").empty(); 位于选项卡的 show 事件内。脚本 block 包含我放入选项卡调用的部分 View 中的 javascript，因此每次我单击之前单击的选项卡时，都会出现一个新的 JScript block :很明显，这会导致稳定性或内存泄漏问题...例如，我已经注意到，在加载一个选项卡两次后，某些计时器和绑定(bind)无法正常工作。

我不知道问题是否是由调用包含脚本的部分 View 的方式引起的。请注意我如何设置 Controller 操作(示例中的索引)。

这是我的环境:jquery 1.6.4 - jquery-ui 1.8.16 - IE 8.0.7601我无法成功使用其他浏览器进行调试，因为 Visual Studio 似乎没有附加它们的进程并且不显示动态数据...

Controller

这是选项卡调用的操作示例

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

        return View(); 
    }

以下是我的一些观点和脚本:

_Layout.cshtml

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

_TabsMenu.cshtml(包含选项卡菜单的部分 View )

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

(我什至尝试将脚本放入 div id 中，pheraps 很愚蠢，但我想看看 DOM 中的脚本是否被删除......但没有)

Index.cshtml

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

_Index.cshtml(包含问题的重复 jscript 对象的部分 View )

   <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]);

已更新

JScript - 脚本 block 1..N//这是我在调试过程中在每个 JScript - 脚本 block 中看到的内容...我是 testint jqgrid。这是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]);                

Answer 1

浏览器解析的脚本不在 DOM 中，您无法“删除”它 - 变量仍然定义，事件仍然绑定(bind)，方法仍然存在。如果您将 JavaScript 放入重复加载的分部 View 中，您将重复获取该 JavaScript。

您需要做的是编写您的 JavaScript，使其对此更具弹性。如果您将事件绑定(bind)到动态区域之外的元素，则不要这样做。您将多次绑定(bind)它们。将该代码移动到只会加载一次的地方。尝试将动态区域中的 JavaScript 保持隔离，以便它只处理也在动态区域中的元素。

您还可以通过简单的 if 检查、使用范围更大的 jquery 选择器等来防止多个定义。

如果没有重复 block 中内容的详细信息，我无法提供太多内容。