each（）函數變慢

對不起，剛發現我有一個支架放在錯誤的地方！一切都很好。謝謝您的幫助。each（）函數變慢

我有這個每個功能，當我點擊某些按鈕時觸發。例如前10次點擊的功能很快。但是，每次我觸發該功能（單擊一個按鈕）時，該功能變得越來越慢。每次點擊似乎需要花費兩倍的時間。有人知道爲什麼，我想更重要的是，我如何改變代碼來防止這種情況發生？

謝謝！

function CollarStyleFunction(){ 

$('#Collar-Style-Box').children(".Fabrics").children(".SwatchBox").children('img').each(function() { 

    var titleIs = this.title; 
    if (titleIs==option) { 
     $(this).parent().css("display", "inline"); 
    } 

}); 


/////////////////////////////////////////////////////////// 
///////////////////////////////////////////////////////////

某些其他信息和代碼：

的JS加載XML文件和負載10個布樣到的div（類= 「織物」）：

function parse(document){ 

    $(document).find("Swatch").each(function(){ 
     $(".Fabrics").append(
      '<div class="SwatchBox">'+ 
      '<img id="' + $(this).attr('name') + '" title="' + $(this).attr('title') + '" src="img/swatch/' + $(this).attr('name') + '.png">'+ 
      '</div>' 
     ); 
    }); 


} //function parse End

HTML：

<!-- Collar-Style --> 

    <div id="Collar-Style" class="Name">Collar Style</div> 

    <div id="Collar-Style-Box" class="Box"> 

     <div id="Collar-Style-Options-Box" class="Options"> 

      <div class="SwatchBox"> 
       <img id="Flat-Knit" src="img/options/Flat-Knit.png"> 
      </div><!-- SwatchBox --> 

      <div class="SwatchBox"> 
       <img id="Self-Fabric" src="img/options/Self-Fabric.png"> 
      </div><!-- SwatchBox --> 

      <div class="SwatchBox"> 
       <img id="Woven" src="img/options/Woven.png"> 
      </div><!-- SwatchBox --> 

     </div><!-- Collar-Style-Options-Box --> 

     <div id="Collar-Style-Fabrics-Box" class="Fabrics"> 
     </div><!-- Collar-Style-Fabrics-Box --> 

    </div><!-- Collar-Style-Box --> 

<!-- Canvas --> 

    <div id="Collar-Style-Canvas" class="Canvas"></div>

來源

2013-04-02 user2238083

你能做出的jsfiddle在jsfiddle.net？ –

注意：您可以編寫$（'＃Collar-Style-Box> .Fabrics> .SwatchBox> img'）並且將所有子項（） - 功能都備份。提高可讀性;） – hurrtz

請向我們展示您的HTML，以便我們幫助您修復/改進您對CSS選擇器的使用。另外，您是否每次運行下一次點擊時都添加越來越多的DOM對象？ – jfriend00

只是一些評論...

> function CollarStyleFunction(event){

事件參數未使用，是否有用？

>  $('#Collar-Style-Box').children(".Fabrics").children(".SwatchBox").children('img').each(function (i) {

其他人已經評論了使用選擇器（其可能將被傳遞到本地querySelectorAll方法），而不是多個函數調用。

i參數未使用，是否有用？

>  titleIs = $(this).attr('title');

可變titleIs上述被執行時成爲全球性的。它應該保持在本地。也更有效剛剛拿到title屬性：

var titleIs = this.title;

。

>  if (titleIs==(option)) {

是選項別處初始化？沒有必要爲括號一輪選項：

if (titleIs == option) {

。

>   $(this).parent().css("display", "inline");

你真的想直列？考慮設置顯示爲「」（空字符串），所以元素可以恢復到默認或繼承值，例如：

this.parentNode.style.display = ''; 

>  } 
> });

來源

2013-04-02 23:47:31 RobG

謝謝我做出了改變，它仍在放緩。 – user2238083

對不起，剛發現我有一個支架在錯誤的地方！一切都很好。謝謝您的幫助。 – user2238083

each（）函數變慢

回答

相關問題