jQuery，.empty（）和內存

Question

我的應用程序（ASP.NET MVC）顯示一個頁面，它以固定的時間間隔不斷加載數據。

jQuery腳本調用一個控制器，並根據某些條件呈現不同的局部視圖。

這個局部視圖是附加到帶有jQuery的DOM;先前的元素用empty（）方法刪除。

 $(document).ready(function() { 
     var ScheduledAction = function(func, times, interval) { 
      var ID = window.setInterval(function(times) { 
       return function() { 
        if (times > -1) { 
         if (--times <= 0) 
          window.clearInterval(ID); 
         } 
        func(); 
       } 
      } (times), interval); 
     }; 
     ScheduledAction(function() { 
      LoadAppointments(); 
      }, -1, <%=Model.RefreshTimeout %>); 
    }); 

    function LoadAppointments() { 

     $("#AppointmentsList").empty(); 
     $('#loading').html("<img src='Images/bigloader.gif' />"); 
     $.get(UrlAction, 
      function(data) { 
       if (data != '') { 
        $('#AppointmentsList').append(data); 
        $('#loading').empty(); 
        } 
       else { 
        $('#loading').fadeOut(3000, function() { $('#loading').empty(); }); 
        } 
      }); 
     } 

控制器（UrlAction）返回一個局部視圖。對於每次往返，局部視圖都不同。一旦部分視圖僅包含圖像。在其他情況下是一些有一些信息的div。

我意識到一天後瀏覽器會加載600Mb的內存。 我在做什麼錯？

Answer 1

這可能僅僅是jQuery的錯誤？

我遇到過類似的問題，主要是在所有版本的IE中，隨着時間的推移，大量的AJAX請求。

此bug描述的問題和一個簡單的補丁將jQuery是應該修復它：

http://dev.jquery.com/ticket/6242

Answer 2

我相信這不是你錯了，而是它在瀏覽器中實現JavaScript。您是否在不同的瀏覽器（Firefox，Opera，Internet Explorer）中或僅在某些特定的瀏覽器中面對此問題？

爲了得到更好的答案，您應該發佈一些呈現您的頁面的JavaScript代碼 - 也許可以進行一些優化。

Answer 3

您可以使用滴水工具檢查DOM是否漏水（article） 作爲臨時解決方法，您應該定期重新加載整個頁面。

Answer 4

你可能要改爲試試這個：

[編輯]刪除功能被返回給setInterval

$(document).ready(function() { 
    $('#loading').html("<img src='Images/bigloader.gif' />").hide(); 
    ScheduledAction(LoadAppointments, -1, <%=Model.RefreshTimeout %>); 
}); 

function ScheduledAction(func, times, interval) { 
    var ID = window.setInterval(function() { 
     if (times > -1) { 
      if (--times <= 0) 
       window.clearInterval(ID); 
     } 
     func(); 
    }, interval); 
} 

function LoadAppointments() { 

    $("#AppointmentsList").empty(); 
    $('#loading').show(); 
    $.get(UrlAction, 
      function(data) { 
       if (data != '') { 
        $('#AppointmentsList').append(data); 
        $('#loading').hide(); 
       } 
       else { 
        $('#loading').fadeOut(3000); 
       } 
      }); 
} 

我注意到，你在每加載你裝約會時你的微調。你也正在通過times進入window.setInterval。

我的代碼測試這個功能是：

$(document).ready(function() { 
    $('#loading').html("<img src='loader64.gif' />").hide(); 
    ScheduledAction(LoadAppointments, 1, 100); 
}); 

function ScheduledAction(func, times, interval) { 
    var ID = setInterval(function() { 
     if (times > -1) { 
      if (--times <= 0) 
       clearInterval(ID); 
     } 
     func(); 
    }, interval); 
} 

function LoadAppointments() { 

    $("#content").empty(); 
    $('#loading').show(); 
    $.get('contentServer.php', 
      function(data) { 
       if (data != '') { 
        $('#content').append(data); 
        $('#loading').hide(); 
       } 
       else { 
        $('#loading').fadeOut(3000); 
       } 
      }); 
} 

PHP文件：

//contentServer.php 

<?php 

echo 'The quick brown fox jumped over the lazy dogs back'; 

?>