为什么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;

这是一个工作演示 。 当字体大小达到10px时，10 * .95为9.5，浏览器正在向上舍入到10px。 因此无限循环。

Answer 2

您需要在调试器中单步执行代码并实际检查条件值，以确保它们正在改变您的预期。 我猜是_elm.clientHieght和_elm.clientWidth实际上并没有改变。

Answer 3

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

从font-size获得的单位不一定是（a）像素，也不是（b）与放入的单位相同。

它没有指定用于返回长度的单位，但在许多浏览器中它当前是点。 由于点小于像素，整数长度会更长，所以你可以很容易地永远保持*0.95 。

即使它是像素，浏览器也可以将大小调整到最近的像素，当你读回它时，95％-size的大小与100％相同。 或者你可以达到最小字体大小设置，你将无法再减少它。

因此，不要在每一步上读取当前字体大小，而是在变量中保留所需的像素大小，并每次减少该变量。 然后，如果达到该变量值的预定下限，则放弃。

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 ，如果它们是在减少字体大小？ 在这种情况下它永远不会收敛。 您想要增加字体大小。