jQuery .each function creating infinite loop?

Question

I think my code is creating an infinite loop.

The page never finishes loading.
It "locks up" and Chrome is forced to kill the offending page.
The console doesn't refresh, so I can't read the errors.

The problem I'm trying to solve is having some text elements that are sometimes too wide, but resizing ALL of the text would make some of them really small.

My solution was to go to each header ('.mftitle h1') and compare it to it's container ('.ut-one-third') that is always an acceptable width. If the header is wider than the container, then it reduces the font-size until it isn't.

jQuery( document ).ready(function() {

  jQuery('.mftitle h1').each(function() {

    var container = jQuery(this).closest('.ut-one-third');

    while( jQuery(this).width() > jQuery(container).width() ) {

      jQuery(this).css('font-size', (parseInt(jQuery(this).css('font-size')) - 1) + "px" );

    }

  });

});

Thank you for any help! I'm stumped. And apologies if this is an awful solution, I'm teaching myself jQuery.

FYI, most jQuery methods such as `.closest` return a jQuery object. There is no need to pass the return value to jQuery *again*. You can just write `container.width()`. — Felix Kling, May 13 '14 at 20:35
There's no need to downvote, this is a good question (even thought the code isn't great) — SomeKittens, May 13 '14 at 20:36
[Learn how to debug JavaScript](http://www.creativebloq.com/javascript/javascript-debugging-beginners-3122820) ... add a `console.log` statement or add breakpoints to see which value the variables have. Then you have a better idea what exactly is happening with your code. — Felix Kling, May 13 '14 at 20:36
my guess is that the while loop never ends, or iterates too many times. — Kevin B, May 13 '14 at 20:36
Something to consider: what if the code that tries to make the font size smaller *doesn't actually do that*? — Pointy, May 13 '14 at 20:37
This may contain some answers: http://stackoverflow.com/q/687998/1216976 — SomeKittens, May 13 '14 at 20:38
@FelixKling - Thank you! I took the code from another SO post, and filled in my variables. — Robert F Boord, May 13 '14 at 20:42
if you want to debug a while loop, you may add a debug counter and break the while when the counter reaches a certain value (like 10 if you want to see 10 iterations) — nicolallias, May 13 '14 at 20:46
@BenjaminGruenbaum - If I'm looking at it correctly, it's actively reducing the font-size 1px at a time, until it's no longer a true statement. — Robert F Boord, May 13 '14 at 20:46

Karl-André Gagnon · Answer 1 · 2014-05-13T20:46:16.953

5

Since h1 is a block element, no matter the font-size, it will take the width of the container except if specified. This mean the while loop will never be false if it iterate atleast once.

If you want the h1 to take the content width, you need to set it in display inline-block, float it or get it out of the box by absolute positioning it.

Here an example : http://jsfiddle.net/fWtwL/

Some code has been modified.

edited May 13 '14 at 20:46

answered May 13 '14 at 20:39

Karl-André Gagnon

33,662
5
50
75

@SomeKittensUx2666 Added one! – Karl-André Gagnon May 13 '14 at 20:46
I have no CSS here, and the element is a table, not a block. I'm looking at your fiddle, I think I misunderstood what you meant until I saw this. – Robert F Boord May 13 '14 at 20:48
@RobertFBoord If you can reproduce the problem in a fiddle, it would be really easier to fix! – Karl-André Gagnon May 13 '14 at 20:52
1

@Karl-AndréGagnon - Doing that now! Thank you! – Robert F Boord May 13 '14 at 20:53
@Karl-AndréGagnon - my jsFiddle crashed as well. I think it's just too much work for the JS. I think I'll just be finding a compromise now. Thank you so much for your help though! – Robert F Boord May 13 '14 at 21:05

score 0 · Answer 2 · answered May 13 '14 at 20:40

The while loop can/will be an infinite loop if changing the font size does not make the width of the h1 less than the width of the container. Try while (jQuery(this).width() > jQuery(container).width() && parseInt(jQuery(this).css('font-size')) > 8) or something along those lines...

score -1 · Answer 3 · answered May 13 '14 at 20:41

The problem is actually that you are adjusting the font-size on a repetitive loop until it fits. Javascript can't pull font-size values from the stylesheet directly so its spending a lot of time trying to parse the stylesheet each time the while loop runs.

jQuery .each function creating infinite loop?

3 Answers3