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

My JavaScript is getting a dice result from my Java servlet. I have a label to show the result of a dice in my HTML page. I'm using, but I want to make a cheap impression that will display the changing number on the screen before showing the actual results. Because this is what happens after pressing a "Ajax call" button that is called "Roll Dice" button, the actual result is shown first, and people are shown after random selection in Javascript page ... (I have tried that With setInterval ()). Can you help me find a better way to "effect"?

Thank you! Here is my JS code:

  follan onRollDiceClick () {ajaxGetDiceResult (gameName); } Function ajaxGetDiceResult {gameName} {jQuery.ajax ({url: "rollDice gameName =?" + GameName, datatype: 'json', expired: TIMEOUT_RATE, success: function (data) {var diceResult = data.diceResult; setIntervalXTimes ( ShowRandomNumbers, 200, 20); $ ("# dice-results"). Text (bandit result);}, error: function (error) {}}); } ShowRandomNumbers () {var randomNumber = Math.floor (Math.random () * (6) + 1); . $ ("# Dice-result") text (randomNumber); } Set the set interface (callback, delay, repetition) {var x = 0; Var intervalID = setInterval (function () {callback (); if (++ x === iterations) {clear interval (; interval);}}, delay); }    
 
 
 You can fix it quite easily - your code is almost there instead The result in the callback function is established that you can add an extra parameter to your setIntervalXTimes function - then you can set the actual value after your random repeat is done:  
  function SetIntervalXTimes (callback, delay, iterations, actual resal) {var x = 0; On intervalID = setInterval (function () (callback (); (++ x === repetitions) {clearInterval (intervalID) if; $ ("# dice-result") text (actualResult); // and set number here }}, Delayed); }   
 This is a link to a bella - I'm just calling the respective function directly inside the callback for demonstration purposes  
 if you want to start Before placing AJAX calls, the animation is basically a placeholder animation until the actual result is available, you can do something like this:  
  var intervalID = ""; Function setIntervalXTimes (callback, delay, duplication) {intervalID = setInterval (function () {callback ();}, delay); } Success: function (data) {var diceResult = data.diceResult; ClearInterval (intervalID); . $ ("# Dice-result") text (diceResult); }, Function on the rolledclick () {setIntervalXTimes (showRandomNumbers, 100, 10); // Animation AjaxGuideDisial Regisalt (gameName) begins; }                   
 / Html>