Updating on screen count as javascript code runs.

Question

Hey, I've just started learning JavaScript and I'm making a little script that generates two numbers, the first number stays the same but the second number gets regenerated if it doesn't match the first number.

Here is my script:

function randomNumberMatcher(){
    $(document).ready(function(){
     var number1 = Math.floor(1000000*Math.random());
     var number2 = Math.floor(1000000*Math.random());
     var count = 0;
     $("#box").append("Number to match:[" + number1 + "]<br /><span id='count'></span>");
     function newNumber(){
      number2 = Math.floor(1000000*Math.random())
      count ++;
      $("#count").html("Number of tries:[" + count + "]<br /><br />");
      $("#box").append(number2 + "<br />");
      check();
     }
     function check(){
      if(number2 != number1){
       newNumber();
      }
     }
     check();
    });
};

At the moment when i run the script all it does is hang until it has finished and then it prints the data to the screen, this however is not what I intended it to do, what I want is it print the data to the screen in real time so that I can see the different numbers it is generating appear on the screen one by one.

How would I make it do this?

note: I'm also using the jQuery library.

Answer 1

First consider optimizing the code. There's no need to handle a long-running job if you can make it faster. Do you need to update the DOM so often? What about every n iterations instead?

If you must have long-running code:

1. Break the job up into smaller pieces.
2. Update the screen after each piece.
3. Use window.setTimeout to start the next piece after a (very) short delay.

This also prevents the browser from killing the script for being too long-running.

Answer 2

The easiest way is probably to add a setTimeout around your recursive call to check so that the browser can be allowed to work for the intervening time. Below I've set the timeout to 100ms which means that it will update 10 times per second.

function randomNumberMatcher(){
    $(document).ready(function(){
        var number1 = Math.floor(1000000*Math.random());
        var number2 = Math.floor(1000000*Math.random());
        var count = 0;
        $("#box").append("Number to match:[" + number1 + "]<br /><span id='count'></span>");
        function newNumber(){
                number2 = Math.floor(1000000*Math.random())
                count ++;
                $("#count").html("Number of tries:[" + count + "]<br /><br />");
                $("#box").append(number2 + "<br />");
                window.setTimeout(check,100);
        }
        function check(){
                if(number2 != number1){
                        newNumber();
                }
        }
        check();
    });
};

Answer 3

Seems a little odd to be defining named function within a function. You might try instead doing something like:

var newNumber = function () {...}
var check = function () {...}

I'm not quite sure what is causing it to hang though.

Answer 4

You need to give JS a bit time to update the DOM. Now it has other priorities (checking the numbers).

Replacing

if(number2 != number1){
    newNumber();
}

by

if(number2 != number1){
    setTimeout(newNumber, 1);
}

should do.