dice effect - how to display fake results and the real one in the end (JavaScript)

Question

my javascript is getting a dice result from my Java Servlet. I am using a label in my html page to show the dice result, but I want to make a cheap effect that will display changing numbers on screen before the real result shows. because this is an ajax call that happens after pressing the "roll dice" button, then the real result is shown first, and the ones I choose randomly in the javascript page are shown after... (I tried that with setInterval() ). Can you help me find a good way to do that "effect"?

Thank you! here's my js code:

function onRollDiceClick() {
    ajaxGetDiceResult(gameName);
}

function ajaxGetDiceResult(gameName) {
    jQuery.ajax({
        url: "rollDice?gameName=" + gameName,
        dataType: 'json',
        timeout: TIMEOUT_RATE,
        success: function(data) {
            var diceResult = data.diceResult;
            setIntervalXTimes(showRandomNumbers, 200, 20);
            $("#dice-result").text(diceResult);
        },
        error: function(error) {

        }
    });
 }

function showRandomNumbers() {
    var randomNumber = Math.floor(Math.random() * (6) + 1);

    $("#dice-result").text(randomNumber);
}

function setIntervalXTimes(callback, delay, repetitions) {
    var x = 0;
    var intervalID = setInterval(function() {

        callback();
        if (++x === repetitions) {
            clearInterval(intervalID);
        }
    }, delay);
}

Answer 1

you can fix this quite easily - your code is almost there. instead of setting the result in the callback function you can add an extra parameter to your setIntervalXTimes function - then you can set the actual value after your random repeats are done:

    function setIntervalXTimes(callback, delay, repetitions,actualResult) {
        var x = 0;
        var intervalID = setInterval(function() {
          callback();
          if (++x === repetitions) {
            clearInterval(intervalID);
            $("#dice-result").text(actualResult); // and here set the number
          }
         }, delay);
   }

Here is a link to a fiddle - I am just calling your relevant function directly instead of inside the callback for demonstration purposes http://jsfiddle.net/c9nqthjd/

if you would like to start the animation before you make the ajax call, basically as a placeholder animation until the real result is available you can do something like this: http://jsfiddle.net/4t4xyypc/1/

var intervalID = "";
function setIntervalXTimes(callback, delay, repetitions) {
    intervalID = setInterval(function() { callback(); }, delay);
}


success: function(data) {
        var diceResult = data.diceResult;
        clearInterval(intervalID);
        $("#dice-result").text(diceResult);
},


function onRollDiceClick() {
    setIntervalXTimes(showRandomNumbers, 100, 10);//starts the animation
    ajaxGetDiceResult(gameName);

}

so you basically start the animation when you click on the button, and then clear the interval and set the actual number when your ajax call returns