1

Just playing around a bit, but noticed it's taking way too long for page to load, is there anyway to get it to print out one line at a time instead of having to wait till the entire page is loaded.

limits(){
    var a = 0;

    for (var i = 0; i < 1000; i++) {
        for (var ii = 0; ii < 1000; ii++) {
            document.getElementById('foo').innerHTML += "<p>" + a + "</p>";
            a * 2;

        }
    }
}

Now how would I be able to control this better to where regardless of how long it takes to load print as soon as ready and even slowing it down would be fine.

user3929948
  • 37
  • 1
  • 6

2 Answers2

1

The javascript method window.requestAnimationFrame(callback) will call your callback function on the next animation frame. It's commonly used for animation, and will probably work well for what you're doing.

To modify your code to use requestAnimationFrame, you have to make your function print a small chunk on its own, with a reference to know what chunk to print. If you stored your page contents in an array, for example, that could just be a starting index and a length. Since you are printing the increasing powers of 2, you can just pass in the last power of two and the number of lines you want to print for each run of the function.

You'll also need an exit condition -- a check within limits that if true, returns without requesting the next frame. I simply put a hard cap on the value of a, but you could also check that the index is less than array length (for my array of page contents idea above).

Because requestAnimationFrame passes in a function name as a callback, you can't pass arguments into it. Therefore, you have to use bind to sort of attach the values to the function. Then, within the function, you can access them using this. config is just an object to hold the initial arguments you want the function to have, and then you bind it, which allows you to access them within the function with this.numLines and this.a.

Then, when you request the next frame, you have to bind the values to limits again. If you are alright with keeping the arguments the same, you can just do limits.bind(this). But if you want to change them, you can create another object in a similar way to how I wrote config and bind that instead.

The following code seems to be a basic example of roughly what you're looking for:

var foo = document.getElementById('foo');
var maxA = 1000000000000000000000000000000000;
function limits() {
    for(var i=0; i<this.numLines; ++i) {
        foo.innerHTML += "<p>" + this.a + "</p>";
        this.a *= 2;
        if(this.a > maxA) {
            return;
        }
    }
    requestAnimationFrame(limits.bind(this));
}

config = {
    numLines: 3,
    a: 1
};
requestAnimationFrame(limits.bind(config));

And is implemented in JSFiddle here. I've also implemented a version where it puts each line at the top of the page (as opposed to appending it to the bottom), so that you can see it happening better (you can find that one here).

Thomas Cohn
  • 462
  • 3
  • 12
  • 1
    That looks promising, I'll give it a try and see. – user3929948 May 21 '18 at 20:46
  • Any luck? Let me know if it doesn't work -- I can try to come up with another solution if that's the case. – Thomas Cohn May 21 '18 at 23:30
  • Well I'm confused when would the last request animation be called if it's outside function? And is numlines :3 a shorthand varabile declaration along with a: 1...would input – user3929948 May 22 '18 at 20:06
  • Idk what the config part does and or means, I just left my for loop how it was and added the request animation and config parts but it doesn't stop with the for loop and ultimately it still Boggs down mid way thru, I would like to control the speed to a constant rate but it does print line by line I just need more control over it. – user3929948 May 22 '18 at 20:32
  • If you want to control the speed (as opposed to going as fast as the browser can), you can replace `requestAnimationFrame(limits.bind(this));` with `setTimeout(limits.bind(this), rate);` where `rate` is the number of milliseconds before loading the next block of text. For example, `setTimeout(limits.bind(this), 100);` would write the next block of text every 100 milliseconds -- 10 times per second. – Thomas Cohn May 23 '18 at 14:52
  • If the config part is confusing, there's an easy way to get around it. You can just store `a` and `numLines` as global variables. This means you don't have to do anything with `bind`, but it also means you have to worry about reusing the variables. So you may want to rename `a` to something more detailed, like `printLinesValue`. Here's an example that avoids using `bind`, and uses `setTimeout` instead of `requestAnimationFrame`: https://jsfiddle.net/rzpau138/2/ – Thomas Cohn May 23 '18 at 14:56
0

You can do something like this:

limits(){
    var a = 0;

    for (int i = 0; i < 1000; i++) {
        for (int ii = 0; ii < 1000; ii++) {
            setTimeout(function(){
               document.getElementById('foo').innerHTML += "<p>" + a + "</p>";
               a * 2;
            }, 0);

        }
    }
}

You can adjust the time in the setTimeout, but even leaving it as zero will allow a more interactive experience even while the page builds. Setting it to 10 or 100 will of course slow it down considerably if you like.

dmgig
  • 4,400
  • 5
  • 36
  • 47
  • Will that print one line at a time or will it just make it take longer to load? – user3929948 May 21 '18 at 20:02
  • It should print one line at a time as well as having the advantage as giving other event a chance to be called, I believe. Play around with it. – dmgig May 21 '18 at 20:51
  • Yeah that works but it doesn't seem to affect the actual time each line gets printed it just pauses before executing then tries to print all the lines as fast as it can, maybe change the location of timeout? – user3929948 May 21 '18 at 22:46
  • Well, you could change the "0" in the timeout to "100", that would slow it down. It would pause 1/10th of a second between each line. – dmgig May 22 '18 at 04:00
  • I think Helium's answer is probably the better way to go if you are looking for an animation. – dmgig May 22 '18 at 04:01