使用jQuery加載內容時發生IE6內存泄漏

Question

我認爲我的應用程序中有內存泄漏，無法本地化。

應用程序下載內容並顯示它。當內容已經下載時，它只顯示它（因爲它已經被下載了）。

當我從select中選擇至少10個不同的選項時，會出現該錯誤。 （選擇選項1並用＃wcc-submit確認並等待加載，...，選擇選項10並用＃wcc-submit確認並等待加載）。隨着每個選擇的選項，應用程序變慢。最後，這個錯誤顯示出來：

應用程序是在IE6測試。

JS：

<script type="text/javascript"> 
(function($){ 
$(function(){ 
var language = 'de'; 
var fadeOutSpinnerFadeInContent = function(pageID) { 
    $('#wcc-loader').fadeOut(500, function() { 
     $('#wcc-content-'+pageID).fadeIn(500); 
    }); 
}; 
var makeAjaxCall = function(pageID) { 
    $.ajax({ 
     url: '/some/path/'+language+'/'+pageID+'.php', 
     type: 'get', 
     dataType: 'html', 

     success: function(data, textStatus, jqXHR) { 
      $('#wcc-content-container').append('<div id="wcc-content-'+pageID+'" class="wcc-content hide">'+data+'<div>'); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
      alert('error'); 
     }, 
     complete: function(jqXHR, textStatus) { 
      fadeOutSpinnerFadeInContent(pageID); 
     } 
    }); 
}; 
var downloadContent = function(pageID) { 
    $('#wcc-loader').fadeIn(500, function() { 
     makeAjaxCall(pageID); 
    });//end fade out spinner 
}; 
var openPage = function(pageID) { 
    var earlierContent = $('.wcc-content'); 
    if(earlierContent.size() > 0) { 
     earlierContent.fadeOut(500, function() { 
      if($('#wcc-content-'+pageID).size() > 0) { 
       $('#wcc-content-'+pageID).fadeIn(500); 
      } else { 
       downloadContent(pageID); 
      } 
     }); 
    } else { 
     downloadContent(pageID); 
    } 
}; 

var availableHashArray = [ 
    '-1', 
    'page_id_1', 
    'page_id_2', 
    ... 
    'page_id_100', 
    ], 
    choosenHash = $.inArray(window.location.hash.substring(1), availableHashArray); 

$('#wcc-submit').bind('click.cs', function() { 
    var selectedValue = $('#select-1').val(); 

    if(parseInt(selectedValue, 10) !== -1) { 
     window.location.hash = selectedValue; 
     openPage(selectedValue); 
    } 
}); 

if(choosenHash !== -1) { 
    $('#select-1 option[selected="selected"]').removeAttr('selected'); 
    $('#select-1 option').eq(choosenHash).attr('selected', 'selected'); 
    $('#wcc-submit').trigger('click.cs'); 
} 

}); 
})(jQuery); 
</script> 

HTML：

<div id="wcc-form" class="fm-form"> 
    <form action="#" method="post"> 
     <div class="select-form"> 
        <label class="hidden" for="select-1">Choose an option</label> 
        <select id="select-1" class="fm-text fm-select" name="select-1" > 
         <option value="-1" selected="selected">Choose an option</option> 
         <option value="page_id_1" selected="selected">option 1</option> 
         <option value="page_id_2" selected="selected">option 2</option> 
         ... 
         <option value="page_id_100" selected="selected">option 100</option> 
        </select> 
        <input id="wcc-submit" type="button" value="Show" /> 
     </div> 
    </form> 
</div> 
<div id="wcc-content-container"> 
</div> 
<div id="wcc-content-container"> 
    <div id="wcc-loader" class="hide"></div> 
</div> 

CSS：

<style type="text/css"> 
.hide{ 
    display:none; 
} 
#wcc-loader{ 
    height:50px; 
    background:#fff url('/some/path/to/spinner.gif') 50% 50% no-repeat; 
} 
    #select-1{ 
     margin-left:20px; 
    } 
</style> 

Answer 1

是啊，我知道這個問題的答案之一。

「無視整個問題，因爲它是IE6，它必須死亡。」

什麼？有人不得不說出來。

Answer 2

您可以嘗試使用像dynaTrace Ajax Edition（免費）這樣的JavaScript分析器來查找腳本的最慢部分。

http://ajax.dynatrace.com/ajax/en/

Answer 3

這是最有可能的一個jQuery的問題，你真的不擁有控制權。 （除了不使用產生內存泄漏的代碼部分）。

回到那些日子裏，JS並不打算做這種事情。