왜 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 %와 동일한 크기로 만들 수 있습니다. 또는 최소 글꼴 크기 설정에 도달 할 수 있으며 더 이상 글꼴 크기를 줄일 수 없습니다.

각 단계에서 현재 글꼴 크기를 다시 읽지 않고 원하는 픽셀 크기를 변수에 유지하고 매번 그 변수를 줄입니다. 그런 다음 해당 변수의 값에 대해 미리 결정된 하한값에 도달하면 포기합니다.

Answer 3

디버거에서 코드를 단계별로 실행하고 조건 값을 실제로 확인하여 예상 한대로 변경해야합니다. 내 생각 엔 _elm.clientHieght이고 _elm.clientWidth은 실제로 변경되지 않습니다.

Answer 4

글꼴 크기가 실제로 변경되지 않으므로 무한 루프가 발생했을 가능성이 큽니다. 예 : 발견 된 글꼴 크기가 10px라면 9.5px로 업데이트되어 브라우저에서 10px로 반올림됩니다. 이 경우 아무 변화가 없으며 기능은 영원히 계속 실행됩니다.

Answer 5

당신은 당신이 첫 번째 DIV의 텍스트가 다음, 그것의 상자에 맞게 처음과 같은 다른 모든 div의의 글꼴 크기를 만들 것

$('div').fontBefitting() 

을 수행 할 때 관련이없는 문제가 생겼어요. 이것은 의도 한 동작처럼 들리지 않습니다. 각 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 댄 적은 있는지 확인하고있어?그것은 그러한 상황 하에서 결코 수렴하지 않을 것입니다. 글꼴 크기를 늘리려는 경우