Faster javascript processing

Question

Just asked my first question and got a great response. So helpful. Helped me create this bit of javascript to create two random numbers on the same page.

<script>
window.onload = function(){
generateRandomNumber1();
generateRandomNumber2();
}</script>

<script>
function generateRandomNumber1(){
var n = 30;
var number = Math.floor(Math.random()*n)+1;
document.getElementById("random1").innerHTML = number;
}

function generateRandomNumber2(){
var n = 15;
var number = Math.floor(Math.random()*n)+1;
document.getElementById("random2").innerHTML = number;
}
</script>

A also use this bit of script to show the two divs on a time delay:

<script>
var toggle = function() {
$("#loadingContainer1").show();
}
setTimeout(toggle, 1000);
</script>
<script>
var toggle = function() {
$("#loadingContainer1").hide();
}
setTimeout(toggle, 8000);
</script> 
<script>
var toggle = function() {
$("#loadingContainer2").show();
}
setTimeout(toggle, 7000);
</script> 
<script>
var toggle = function() {
$("#loadingContainer2").hide();
}
setTimeout(toggle, 14000);
</script>

Really cumbersome, I know, but it works, and I'm quite pleased with myself for working most of this out myself (with a lot of help from other people's threads on Stack Overflow).

Anyway, it all works, so that isn't my issue, the only problem is, that the random number generator works so slowly, that the divs the numbers appear in have usually come and gone before the random numbers are generated. After I refresh the page a couple of times, they normally start working a bit faster, but is there any way I could speed up the process so the random numbers are generated within the first second of the page loading.

Thanks very much.

Niet the Dark Absol · Accepted Answer · 2013-03-31 16:51:14Z

2

There is a LOT of messy code there, but maybe it's because onload doesn't fire until the page has completely loaded that it's slow. Here's a rewrite of your code to work better:

<script type="text/javascript">
    $(function() { // uses jQuery's "ready" handler
        $("#random1").html(Math.floor(Math.random()*30)+1);
        $("#random2").html(Math.floor(Math.random()*15)+1);
        $("#loadingContainer1").delay(1000).fadeIn(0).delay(7000).fadeOut(0);
        $("#loadingContainer2").delay(7000).fadeIn(0).delay(7000).fadeOut(0);
    });
</script>

Hope this helps!

answered Mar 31, 2013 at 16:51

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jan Turoň Over a year ago

or maybe loading non-cached jQuery itself makes the page slow :-)

Niet the Dark Absol Over a year ago

@JanTuroň If that were the problem then the show/hide part wouldn't happen "before" the numbers are there.

Edd Tillen Over a year ago

Wonderful. Thanks very much. 'Messy code' should be my avatar name. I honestly don't have the first clue about how to write javascript, I've got just about enough sense to be able to edit important variables in Java script, but I wouldn't even know how to start writing it. All my code is cobbled together from bits and bobs I've picked up. Wish I knew more so that I could do what you've done and consolidate it all, I hate being messy. Thank you, anyway, this worked perfectly.

Edd Tillen Over a year ago

...except, just as an interesting point, the website is built within an overarching template, and then the page that this javascript is supposed to work on is a separate html file which sits in that template. When I put this bit of code in the head (in the overarching template) it works perfectly (but I think the side effect might be that it loads on every single page, therefore slightly slowing down each page throughout the website). When I put the js code in the body of the actual page, it works almost perfectly, except the first div reappears after a short time, and then disappears again.

Edd Tillen Over a year ago

It's all good, just thought that was a strange little anomaly worth feeding back.

Collectives™ on Stack Overflow

Faster javascript processing

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related