なぜJavaScriptのループが無限大ですか？

Question

私はこれをやっていません。これは大きなプロジェクトを終了する小さな作品で、私の心は揚げられています...

ここにコードがあります。要素があふれているかどうかを確認し、フォントのサイズを変更します。オーバーフローしなくなるまでサイズを変更する予定です。ループの条件が無視されてブラウザがフリーズしているようです... 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');   
    } 

} 

ありがとうございます。

Answer 1

変更：

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に丸めていました。したがって、無限ループ。

Answer 2

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

あなたがfont-sizeから取得単位は、あなたが入れとして必ずしも（a）のピクセルではなく、また（b）は同ユニット。

それは、長さを返すために使用されるものを単位指定されていないのですが、多くのブラウザでは、現在ポイントです。点はピクセルよりも小さいので、整数の長さは長くなるので、非常に簡単にを続けることができます。

ピクセルであっても、ブラウザーはサイズを最も近いピクセルに丸めて、読み取ったときに95％のサイズを100％と同じサイズにすることができます。または、font-sizeの最小設定に達しても、それを減らすことはできません。

各ステップで現在のフォントサイズを読み返す代わりに、必要なピクセルサイズを変数に保存し、毎回その変数を減らします。次に、その変数の値の所定の下限に達した場合は、あきらめてください。

Answer 3

デバッガでコードをステップ実行し、実際に条件の値を確認して、期待通りの状態になっていることを確認する必要があります。私の推測は_elm.clientHieghtで、_elm.clientWidthは実際には変更されていません。

Answer 4

フォントサイズが実際に変更されないため、おそらく無限ループに陥っています。例えば。見つかったフォントサイズが10pxの場合、それを9.5pxに更新します。これはおそらくブラウザによって10pxに丸められます。その場合は何も変わらず、機能は永遠に続くでしょう。

Answer 5

あなたは

$('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');   
     } 
    }); 
} 

Answer 6

あなたはclientHeightまたはclientWidthがscrollHeightまたはscrollWidth以下であるかどうかを確認するためにチェックしている、と彼らはしている場合は、フォントサイズを小さくしていますか？このような状況では、決して収束しません。フォントサイズを増やしたいとします。