4

I want to make my browser to execute javascript code slower. Is there a Browser addon or something to do this?

Background: I want to demonstrate the impact of execution time on a given browser game. The speed of this game is only limited by the speed of the execution time of its code, just like in the good old MS-DOS Games. To show students the impact of such coding (depending on CPU cycles and not on time), it would be great if I could throttle down the execution speed of the code.

Any ideas?

Thanks!

dynobo
  • 675
  • 1
  • 6
  • 15
  • Maybe you can [underclock](https://en.wikipedia.org/wiki/Underclocking) your processor. – Oriol Nov 02 '15 at 17:59
  • 2
    couldn't you just write code to deliberately waste time? – Rune FS Nov 02 '15 at 17:59
  • You could run a CPU-intensive task next to the browser (some benchmarking tool, for example) or you might look into a way to throttle a specific process, but that depends on the operating system you’re using. – hanzi Nov 02 '15 at 18:02
  • 2
    Maybe it's enough to run it in a virtual machine giving very few resources to it. For example Virtual Box allows to set the CPU execution cap for specific machine - http://superuser.com/questions/265322/limiting-cpu-speed-in-a-virtual-machine – tiblu Nov 02 '15 at 18:28
  • I think a timer is what are you looking for. Check jquery's animate for a old but good example http://blog.bigbinary.com/2010/01/25/how-animate-really-works-in-jquery-simple-animation-case-discussed.html – edigu Nov 02 '15 at 20:21

3 Answers3

1

This sounds like an appropriate use case for an actual sleep function in JavaScript - just put a busy loop in your code that runs until the time changes.

function sleep(µs) {
     var end = performance.now() + µs/1000;
     while (end > performance.now()) ; // do nothing
}
Community
  • 1
  • 1
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
1

This code will draw/loop as fast as possible

function loop() {
  draw();
  loop();
}

This code will artificially add ~100 ms of time to each loop cycle

function loop() {
  draw();
  setTimeout(loop, 100);
}

Something I use when I create loops like this is a delta so accurate calculations can be made

function draw(delta) {
  console.log("%f ms", delta);
}

function loop(last) {
  var now = performance.now();
  var delta = now - last;
  draw(delta);
  setTimeout(function() { loop(now); }, 100);
}

loop(0);

// 102.51500000001397 ms
// 102.38000000000466 ms
// 105.33499999996275 ms
// 101.27500000002328 ms
// 103 ms
// 100.88000000000466 ms
// 100.9649999999674 ms
// 100.69500000000698 ms
// 102.01500000001397 ms
// 105.85499999998137 ms

As you can see, draw is being called about once every 100 ms. This is approximately 10 frames per second. You can now use this delta to do precise calculations for things like animation sequences or positioning moving elements

You could easily make this a variable for your loop

function framesPerSecond(x) {
  return 1e3/x;
}

function draw(delta) {
  console.log("%f ms", delta);
}

function loop(fps, last) {
  var now = performance.now();
  var delta = now - last;
  draw(delta);
  setTimeout(function() { loop(fps, now); }, fps);
}

loop(framesPerSecond(25), 0); // 25 frames per second
// 42.8150000000023 ms
// 42.1600000000035 ms
// 44.8150000000023 ms
// 41.8299999999872 ms
// 43.195000000007 ms
// 41.7250000000058 ms
// 42.1349999999802 ms
// 43.0950000000012 ms

You can simulate any frame rate pretty easily now

loop(framesPerSecond(0.5), 0); // 1 frame per 2 seconds
// 2001.58 ms
// 2002.705 ms
// 2005.9 ms
// 2001.665 ms
// 2002.59 ms
// 2006.165 ms

Note: framesPerSecond will not be very accurate when draw takes any significant amount of time to complete. You could improve this by measuring the duration it takes for draw to run each cycle and subtracting that from the fps delay.

Mulan
  • 129,518
  • 31
  • 228
  • 259
0

Create a function that calculates fibonacci (limited to a max in order to not kill the browser), and call it between other functions:

function fibo(max) {
    var x = 0;
    for (var i = 0, j = 1, k = 0; k < max; i = j, j = x, k++) {
        x = i + j;
    }
}

and then just call it between your other function calls:

doSomething();
fibo(15);
doSomethingElse();
fibo(15);
doSomethingElseElse();
fibo(15);
taxicala
  • 21,408
  • 7
  • 37
  • 66