Generating random unique data takes too long and e

Question

WARNING: CPU Usage goes to 100%, be careful.

Link to the jsFiddle

This script has been written to design a dynamic snake and ladder board. Everytime the page is refreshed a new board is created. Most of the time all of the background images do not appear, and the CPU usage goes up to 100%. But on occasion all of them appear and the CPU usage is normal.

Opera shows some of the background images, Firefox lags and asks me if I wish to stop the script.

I believe that the problem is with these lines of code:

        for(var key in origin)      // Need to implement check to ensure that two keys do not have the same VALUES!
        {
            if(origin[key] == random_1 || origin[key] == random_2 || key == random_2)   // End points cannot be the same AND starting and end points cannot be the same.
            {
                valFlag = 1;
            }
            console.log(key);
        }

Answer 1

Your algorithm is very ineffective. When array is almost filled up, you literally do millions of useless iterations until you're in luck and RNG accidentally picks missing number. Rewrite it to:

1. Generate an array of all possible numbers - from 1 to 99.
2. When you need a random numbers, generate a random index in current bounds of this array, splice element and this random position, removing it from array and use its value as your desired random number.
3. If generated numbers don't fit some of your conditions (minDiff?) return them back to array. Do note, that you can still stall in loop forever if everything that is left in array is unable to fit your conditions.

Every value you pull from array in this way is guaranteed to be unique, since you originally filled it with unique numbers and remove them on use.

I've stripped drawing and placed generated numbers into array that you can check in console. Put your drawing back and it should work - numbers are generated instantly now:

var snakes = ['./Images/Snakes/snake1.png','./Images/Snakes/snake2.jpg','./Images/Snakes/snake3.gif','./Images/Snakes/snake4.gif','./Images/Snakes/snake5.gif','./Images/Snakes/snake6.jpg'];
var ladders = ['./Images/Ladders/ladder1.jpg','./Images/Ladders/ladder2.jpg','./Images/Ladders/ladder3.png','./Images/Ladders/ladder4.jpg','./Images/Ladders/ladder5.png'];


function drawTable()
{
    // Now generating snakes.
    generateRand(snakes,0);
    generateRand(ladders,1);

}

var uniqNumbers = []
for(var idx = 1; idx < 100; idx++){ uniqNumbers.push(idx) }

var results = []

function generateRand(arr,flag)
{
    var valFlag = 0;
    var minDiff = 8;        // Minimum difference between start of snake/ladder to its end.
    var temp;

    for(var i = 0; i< arr.length; ++i) {

        var valid = false

        // This is the single place it still can hang, through with current size of arrays it is highly unlikely
        do {
            var random_1 = uniqNumbers.splice(Math.random() * uniqNumbers.length, 1)[0]
            var random_2 = uniqNumbers.splice(Math.random() * uniqNumbers.length, 1)[0]
            if (Math.abs(random_1 - random_2) < minDiff) {
                // return numbers
                uniqNumbers.push(random_1)
                uniqNumbers.push(random_2)
            } else {
                valid = true
            }
        } while (!valid);


        if(flag == 0)     // Snake
        {
            if(random_1 < random_2)        // Swapping them if the first number is smaller than the second number.
            {
                var temp = random_1; random_1 = random_2; random_2 = temp
            }
        }
        else         // Ladders
        {
            if(random_1>random_2)        // Swapping them if the first number is greater than the second number.
            {
                var temp = random_1; random_1 = random_2; random_2 = temp
            }
        }
        // Just for debug - look results up on console
        results.push([random_1, random_2])
    }
}

drawTable()

Answer 2

I had a problem like this using "HighCharts", in a for loop - "browsers" have an in-built functionality to detect dead scripts or infinite loops. So the browsers halts or pop-ups up a message saying not responding. Not sure if you have that symptom!

This was resulted from a "loop" with a large pool of data. I wrote a tutorial on it on CodeProject, you might try it, and it might be your answer.

http://www.codeproject.com/Tips/406739/Preventing-Stop-running-this-script-in-Browsers