Geek Answers Handbook

I need a workaround for a safari / chrome bug that becomes a spike on my side

So, I have this neat javascript function that I use to print text in a browser window in a cool command line style. He takes a line and prints it one character at a time into a window with a given interval. Here it is: (I cut out all the unnecessary parts to make it work as a separate example.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript"> var letterIndex = 0; var intervalId = 0; function writeOneLetter(myString) { var char = myString[letterIndex]; $('#display').append(char); letterIndex++; if (letterIndex >= myString.length) { letterIndex = 0; clearInterval(intervalId); } } $(function () { $('#caret').html('\u2588'); //This will help you visualize where the script is at in it sequence and make it painfully obvious when the freezing issue occurs. // The following string sample is so long because it is important that you be able to duplicate this error to understand my question. var myString = "Quisque vestibulum consequat orci, in euismod tortor dapibus eu. Duis nec urna nec erat sagittis pretium vel ac diam. Nulla mi lorem, tempor ut cursus in, mattis non libero. Curabitur eget venenatis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit ante in ligula tincidunt quis vehicula massa scelerisque. Pellentesque nec posuere massa. Sed eget nunc a erat dictum faucibus. In vitae tempor lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel imperdiet tellus. Suspendisse ultricies sem a libero sagittis feugiat. Ut convallis magna eu mauris molestie dapibus. Nulla feugiat urna non ante facilisis non ultrices nisi viverra. Aliquam vitae magna libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur at odio sit amet nisi dapibus scelerisque. In fringilla lorem at sapien rutrum scelerisque." intervalId = setInterval(function () { writeOneLetter(myString); }, 15); }); </script> </head> <body> <span id="display"> </span><span id="caret"></span> </body> </html>

Go here http://www.jsfiddle.net/Chevex/6n5VV/ to try the sample code above.

If you are in IE or FF, the code will work exactly as expected, writing out each character in the string until completion. However, if you run this code in Chrome or Safari, you get an interesting error. Sometimes, when a line hits the side of the container, and the words wrap around and move on to the next line, it freezes. The prints stop showing up in the browser, but they still happen in the DOM, because if the page is resized or the browser is resized, the remaining text appears immediately.

A few things I noticed about this are that this only happens when it lowers the line with the leading space. Also, if you resize the browser window while the script is still running, or after the script finishes, it will suddenly take effect again and you will see the rest of the text. Any resizing, maximization, etc. They will start repeating letters; just to freeze again later.

This is very annoying since it never displays the rest of the line unless the page is resized more than javascript subsequently or the browser size does not change. This completely destroys the entire purpose of the script, primarily when this happens.

Any ideas? I am completely at a dead end and Google is not showing up.

EDIT:

If you cannot reproduce the error, it is probably because your screen is different from my resolution and you are in luck. Try resizing the browser window, jsFiddle display container, or both, and then run the script again. It should not take long before you see that it freezes. Try to aim so that one of the lines wraps the word on a space, it seems that this happens mainly.

I did it in chrome and safari on three different computers, one on a completely different network. If you still don't see the error, run it in chrome and firefox next. If chrome seems to end earlier than FF, then this is a freezing glitch in action. If you change the size of the browser or in any way change the page, then suddenly all the remaining text will appear.

+6
javascript jquery html google-chrome safari
source share
2 answers

This seems to work if you do not add each char as a separate node, but update the entire textual content of the range each time the writeOneLetter function is called:

  function writeOneLetter(myString) { var char = myString[letterIndex]; $('#display').text($('#display').text()+char); letterIndex++; if (letterIndex >= myString.length) { letterIndex = 0; clearInterval(intervalId); } }

Try it here: http://www.jsfiddle.net/5R3JP/

+5
source share

A strange mistake, I agree. I get the same behavior you are describing (Chrome 7.0.517.44 on Windows). In my case, if an error occurs, I don’t even get all the text displayed when the script ends.

One trick that seems to work for me is to alternate the appearance of the carriage (I suppose this forces Chrome to do some reengineering). It's ugly, I know, and obviously a lot slower (although not noticeable on my machine), but maybe you can use it as a temporary workaround?

 var letterIndex = 0; var intervalId = 0; function writeOneLetter(myString) { var char = myString[letterIndex]; $('#display').append(char); $('#caret').css("font-weight", letterIndex % 2 ? "bold" : "normal"); letterIndex++; if (letterIndex >= myString.length) { letterIndex = 0; clearInterval(intervalId); } }

Note. Setting the carriage character in bold does not actually noticeably change the appearance, so you usually don't see the alternation for each character.

+1
source share

More articles:


All Articles