Appending 1 digit at a time to an element from a 100,000 digit string?

Question

Goal: I want to fill a page with 100,000 digits of π, one digit at a time. Here is what i have so far: http://jsfiddle.net/xnW6V/

It's just repeating the same value for now from a variable. What i need to do is have a variable 100,00 long (i'm taking it from here: http://www.geom.uiuc.edu/~huberty/math5337/groupe/digits.html) and with each setInterval event, add a new digit to the div.

I'm mentioning the size of the string just in case this presents issues with conventional methods.

Thanks.

Joseph Silber · Accepted Answer · 2012-03-09T18:30:55.680

3

var i = 0,
    pi = '3.1415926535897932384626433832795049445',
    max = pi.length,
    div = $('div'),
    timer = setInterval(function() {
          div.append(pi.charAt(i++));
          i == max && clearInterval(timer);
    }, 50);

Here's the fiddle: http://jsfiddle.net/yBtPE/

P.S. Are you sure you want to do this? You should seriously do some performance testing before pushing this onto a production site.

edited Mar 09 '12 at 18:30

answered Mar 09 '12 at 18:16

Joseph Silber

214,931
59
362
292

1

What happens when `i` goes beyond the length of the array? – JaredPar Mar 09 '12 at 18:18
not sure how my eyes walked write past the `|| clearInterval(timer)`. :( – JaredPar Mar 09 '12 at 18:24
@JaredPar - I had changed the code while you were commenting... – Joseph Silber Mar 09 '12 at 18:24
http://jsfiddle.net/marckremers/eFXVY/1/ that did it, thanks. no i want to add sound events, font and background colour changes with each digit. And have the page scroll to focus on the latest number, but that's for another question :-) – RGBK Mar 09 '12 at 18:36

JaredPar · Answer 2 · 2012-03-09T18:20:48.640

2

It sounds like the best approach is to hard code the long PI digit string and just regularly increase the span displayed to the user

(function() {
  // You'll need to expand to the 100,000 digits you want to show. Shortened here
  // since it's a sample 
  var pi = "3.141592653589793238462643383279502884197169399375105820974944592307816406286 208998628034825342117067982148086513282306647093844609550582231725359408128481";
  var index = 5;
  $('div').text(pi.substring(0, 5));
  var timer = setInterval(function() {
    $('div').append(pi[index]);
    index++;
    if (index === pi.length) {
      clearInterval(timer);
    }
  });
})();

Fiddle: http://jsfiddle.net/xnW6V/3/

edited Mar 09 '12 at 18:20

answered Mar 09 '12 at 18:15

JaredPar

733,204
149
1,241
1,454

2

The "full" Pi string? :P – Robert Harvey Mar 09 '12 at 18:18
@RobertHarvey yeah, bad choice of words :) – JaredPar Mar 09 '12 at 18:20

score 1 · Answer 3 · answered Mar 09 '12 at 18:18

1

I like JaredPar's approach, but here is a different way to do it (similar to what you have now). Just store PI as a string, and display one character at a time:

// var clipped so the SO markdown parser won't hang    
var bigPI = "3.14159265358979323846264338327950288419716939937510582097494459230781640628620899862803482534211706798214808651328230664709384460";
var current = 0;
setInterval(function() {
    $("div").append(bigPI.charAt(current));
    current++;
}, 50);

Working jsfiddle

NOTE

It's recommended you stop the timer when current == bigPI.length.

answered Mar 09 '12 at 18:18

bfavaretto

71,580
16
111
150

What happens when current exceeds the length of the string? The interval will keep running – JaredPar Mar 09 '12 at 18:27
Yes, I added a not stating that it should be stopped. Surprisingly, however, it won't cause an error, I think `charAt` just returns an empty string. – bfavaretto Mar 09 '12 at 18:40

Appending 1 digit at a time to an element from a 100,000 digit string?

3 Answers3