消防功能（）已完成

Question

這是稍微涉及到這個問題 Invoking a jQuery function after .each() has completed

但解決方案並不完全似乎爲我工作。

基本上我有一塊的JavaScript的計算，一些元件的寬度：

$element.width(totalWidth); 

如果我附上：

var totalWidth = 0; 
$element.find('li').each(function() { 
    totalWidth += $(this).width(); 
}); 

此欲再使用的寬度來設置另一元件後它的調試工作，但如果我只是運行它不。這使我認爲在.each()完成之前寬度已被設置。

我試着用.promise()來解決這個問題，但它似乎沒有什麼區別。

var totalWidth = 0; 
$element.find('li').each(function() { 
    totalWidth += $(this).width(); 
}); 

$element.promise().done(function() { 
    $element.width(totalWidth); 
}); 

這裏是我的HTML

<div class="carousel"> 
     <ul> 
      <li> 
       <img src="/Images/Travel2New/Adverts/advertHolder_1.png" /> 
      </li> 
      <li> 
       <img src="/Images/Travel2New/Adverts/advertHolder_2.png" /> 
      </li> 
      <li> 
       <img src="/Images/Travel2New/Adverts/advertHolder_3.png" /> 
      </li> 
      <li> 
       <img src="/Images/Travel2New/Adverts/advertHolder_4.png" /> 
      </li> 
      <li> 
       <img src="/Images/Travel2New/Adverts/advertHolder_5.png" /> 
      </li> 
     </ul> 
    </div> 

任何想法？

Answer 1

因爲你的寬度計算應等到圖形被加載，那麼你可以嘗試以下方法：

$(window).load(function() { 
    var totalWidth = 0; 

    $element.find('li').each(function() { 
     totalWidth += $(this).width(); 
    }); 

    $element.width(totalWidth); 
}); 

從load()事件例子說明，我們可以看到：

運行一種功能，當頁面已完全加載，包括圖形。

$(window).load(function() { 
    // run code 
}); 

注意的是，目前的load()事件似乎是deprecated，所以你應該考慮你能夠利用jQuery開發的版本。

Answer 2

嗯，這是與.each

已知的問題，你可以做這樣的

var totalWidth = 0; 

    var $elems = $element.find('li'); 

    (function fetch(i) { 
     if(i >= $elems.length) return; // no elems left 

     var $elem = $elems.eq(i); 
     totalWidth += $($elem).width(); 
     if(i+1==$elems.length) 
     { 
     $element.width(totalWidth); 
     } 
     else 
     { 
     fetch(i + 1); // next one 
     }   
    })(0); // start with first elem