爲什麼JavaScript的循環是無限的？

我討厭這樣做。這是結束一個大型項目和我的頭腦被炸的小塊...爲什麼JavaScript的循環是無限的？

這是代碼。它檢查元素是否溢出並調整字體大小。它應該調整它的大小，直到它不溢出。循環的條件似乎被忽略，瀏覽器凍結...我覺得我錯過了jQuery如何在這裏工作的關鍵。

$.fn.fontBefitting = function() { 
    var _elm = $(this)[0]; 
    var _hasScrollBar = false; 
    while ((_elm.clientHeight < _elm.scrollHeight) || (_elm.clientWidth < _elm.scrollWidth)) { 
     var fontSize = $(this).css('fontSize'); 
     fontSize = parseInt(fontSize.substring(0,fontSize.length-2))*0.95; 
     $(this).css('fontSize',fontSize+'px');   
    } 

}

在此先感謝。

來源

2011-09-12 rpophessagr

'while'循環在哪裏？ –

沒有while循環？這是矩陣嗎？ –

哎呀，我把它作爲條件發佈。編輯... – rpophessagr

變化：

fontSize = parseInt(fontSize.substring(0,fontSize.length-2))*0.95;

到：

fontSize = parseInt(fontSize.substring(0,fontSize.length-2))-1;

這裏有一個Working Demo。當字體大小達到10px時，10 * .95是9.5，瀏覽器正在湊到10px。因此無限循環。

來源

2011-09-12 20:40:40 Joe

你比較是正確的。但是9.5的fontSize正在返回到10. – Joe

謝謝！這會做到！ – rpophessagr

沒問題，我一直在那裏。查看相同的代碼太久，知道這是我無法看到的。我無法相信那個人告訴你辭職。這不是很優雅。很高興我能幫上忙。 – Joe

var fontSize = $(this).css('fontSize'); 
fontSize = parseInt(fontSize, ...

你font-size獲得該單位不必（一）像素，也不是（B）你把在同一單元。

它沒有指定什麼單位用於返回的長度，但在許多瀏覽器中，它現在是點。由於點數小於像素，因此整數長度將會更長，因此您可以很容易地永久保留*0.95。

即使它是像素，瀏覽器也可以將尺寸放大到最接近的像素，當您讀回時，可以使95％的尺寸與100％的尺寸相同。或者你可以達到最小字體大小的設置，你將無法再減少它。

因此，不是每次讀取當前字體大小，而是將所需的像素大小保存在一個變量中，並且每次減少該變量。然後，如果您達到該變量值的預定下限，請放棄。

來源

2011-09-12 20:36:48 bobince

「你從字體大小獲得的單位不一定是（a）像素，也不是（b）與你放入的單位相同。」當我調試解決方案時，它是在px中，即使字體設置爲100％。這會因現場而異嗎？ – rpophessagr

您需要在調試器中遍歷您的代碼，並實際檢查您的條件值以確保它們正在改變您的期望值。我的猜測是_elm.clientHieght和_elm.clientWidth實際上並沒有改變。

來源

2011-09-12 20:36:58 Jack

他們正在改變，代碼使用條件而不是循環。 – rpophessagr

您可能會遇到無限循環，因爲字體大小實際上並未改變。例如。如果找到的字體大小爲10px，則會將其更新爲9.5px，這可能會被瀏覽器回滾到10px。在這種情況下，沒有任何變化，功能將永遠持續運行。

來源

2011-09-12 20:38:34 AVee

我很感謝幫助，那就是答案。因爲這個工作例子，@abstract得到了綠色檢查。 – rpophessagr

你有一個不相關的問題，當你做

$('div').fontBefitting()

這將使在第一個div文本適合它的箱，然後將所有其他的div一樣第一的字體大小。這聽起來不像預期的行爲。你會希望它會讓每個div調整文本大小，只調整其文本大小。

你需要對你的代碼改成這樣：

$.fn.fontBefitting = function() { 
    /* $.fn.* runs on a jQuery object. Make sure to return it for chaining */ 
    return this.each(function() { 
     var fontSize = parseInt($(this).css('fontSize')); 
     while (this.clientHeight < this.scrollHeight || 
       this.clientWidth < this.scrollWidth) { 
      fontSize--; 
      $(this).css('fontSize', fontSize + 'px');   
     } 
    }); 
}

來源

2011-09-12 20:38:59 Eric

爲什麼downvote？ OP的代碼對「$ .fn」的工作原理以及瀏覽器如何處理字體大小做出了錯誤的假設。 – Eric

我感謝你的努力和優化，但我想你因爲你的措辭而被拒絕投票。我建議將來的編輯要說：「這裏有一些方法可以優化你的代碼。」而不是：「你的代碼寫得不好。」我會很樂意使用你的代碼來改進我的。謝謝 – rpophessagr

@rpophessagr：這不僅僅是優化，你的代碼行爲不正確 - 調用'$（'div'）。fontBefitting（）'將使第一個div中的文本適合它的框，並使所有其他字體div與第一個相同。可能不是有意的行爲。 – Eric

您正在查看clientHeight或clientWidth是否比scrollHeight或scrollWidth小，如果他們是你減少字體大小？在這種情況下，它永遠不會收斂。你想增加字體大小。

來源

2011-09-12 20:40:44 Femi

我正在縮小字體大小，以免溢出。 – rpophessagr

爲什麼JavaScript的循環是無限的？

回答

相關問題