爲什麼jquery腳本永遠持續？

Question

我是jquery的新手，並在我的主頁上運行腳本來確定容器中的行數（即div）。如果行數超過3或4行（取決於div類是「threeline」還是「fourline」），它將截斷它並添加省略號。然而，這個腳本永遠執行，所以我想知道爲什麼或如何優化。我試圖把我的頭繞在javascript/jquery上，但它對我來說確實是一門外語！

有人可以看看這個腳本，讓我知道如何編輯它，使其更快？是否不必要地檢查頁面上的所有元素？

下面是它怎麼叫我的PHP頁面：

<div class="bubble left"> 
    <div class="rounded"> 
      <blockquote class="ellipsis fourline"> 
        <h3><a href="http://www.xyz.com">This is the title</a></h3> 

        <p>This is the body of the quote; if the body plus title is more than fourlines, then the text will be truncated and an ellipsis will be added</p> 
      </blockquote> 
    </div> 
    <cite class="rounded">March 18, 2010</cite> 
    </div> 


<script type="text/javascript" src="/scripts/js/jquery.ellipsis.js"></script> 
<script type="text/javascript"> $(".ellipsis").ellipsis(); </script> 

這是jquery.ellipsis.js文件：

(function($) { 
     $.fn.ellipsis = function() 
     { 
       return this.each(function() 
       { 
         var el = $(this); 

         if(el.css("overflow") == "hidden" && el.hasClass('fourline')) 
         { 
           var text = el.html(); 
           var fourline = el.hasClass('fourline'); 
           var t = $(this.cloneNode(true)) 
             .hide() 
             .css('position', 'absolute') 
             .css('overflow', 'visible') 
             .width(fourline ? el.width() : 'auto') 
             .height(fourline ? 'auto' : el.height()) 
             ; 

           el.after(t); 

           function height() { return t.height() > el.height(); }; 
           function width() { return t.width() > el.width(); }; 

           var func = fourline ? height : width; 

           while (text.length > 0 && func()) 
           { 
             text = text.substr(0, text.length - 1); 
             t.html(text + "…"); 
           } 

           el.html(t.html()); 
           t.remove(); 
         } else if (el.css("overflow") == "hidden" && el.hasClass('threeline')) 
         { 
           var text = el.html(); 
           var threeline = el.hasClass('threeline'); 
           var t = $(this.cloneNode(true)) 
             .hide() 
             .css('position', 'absolute') 
             .css('overflow', 'visible') 
             .width(threeline ? el.width() : 'auto') 
             .height(threeline ? 'auto' : el.height()) 
             ; 

           el.after(t); 

           function height() { return t.height() > el.height(); }; 
           function width() { return t.width() > el.width(); }; 

           var func = threeline ? height : width; 

           while (text.length > 0 && func()) 
           { 
             text = text.substr(0, text.length - 1); 
             t.html(text + "…"); 
           } 

           el.html(t.html()); 
           t.remove(); 
         } 
       }); 
     }; 
})(jQuery); 

在此先感謝，我喜歡這個網站！

Answer 1

很難說，因爲那裏有很多代碼。

我會考慮使用一個探查器，比如Firebug探查器來確定什麼是最難的。

http://getfirebug.com/wiki/index.php/Console_Panel#Profiling

關閉我的頭頂，我猜想它有什麼做的，而迭代，而事實上你是他們中鏈接多個功能。分析會給你一個更好的圖片，但。

Answer 2

我敢肯定，那就是：

while (text.length > 0 && func()) 
{ 
     text = text.substr(0, text.length - 1); 
     t.html(text + "…"); 
} 

它看起來像你的循環，而你仍然有文字，採取字符關閉並把它放在一個div。如果你有很多角色，這將需要一段時間。

爲什麼不使用插件？

有關於這個在這裏一個很好的討論： http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/

爲IE，Safari和Chrome則可以只設置文本溢出省略號，它會照顧它。