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

您需要在调试器中单步执行代码并实际检查条件值，以确保它们正在改变您的预期。我的猜测是_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，如果他们正在减少字体大小？在这种情况下它永远不会收敛。您想增加字体大小。

为什么JavaScript循环无限？

6 个答案: