骰子效果-如何在最后显示假结果和真实结果（JavaScript）

我的javascript正在从我的Javaservlet中获得一个骰子结果。 我在html页面中使用了一个标签来显示骰子结果，但我想做一个便宜的效果，在真正的结果显示之前在屏幕上显示不断变化的数字。 因为这是一个在按下“掷骰子”按钮后发生的ajax调用，所以真正的结果将首先显示，我在javascript页面中随机选择的结果将显示在。。。 （我用setInterval（）试过了）。你能帮我找到一个好方法来达到这个“效果”吗

谢谢大家!！以下是我的js代码：

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);
}

---

您可以很容易地解决这个问题-您的代码就快到了。 不必在回调函数中设置结果，您可以在setIntervalXTimes函数中添加一个额外的参数-然后您可以在随机重复完成后设置实际值：

    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);
   }

这里有一个指向fiddle的链接——我只是直接调用相关函数，而不是在回调函数中进行演示

如果您想在进行ajax调用之前启动动画，基本上是作为占位符动画，直到实际结果可用，您可以执行以下操作：

---

因此，您基本上是在单击按钮时启动动画，然后在ajax调用返回时清除间隔并设置实际数字

为什么您只开始在成功函数中显示随机数字？难道您不应该在发出AJAX请求时开始显示它们，然后在成功（或错误）时停止显示它们吗？

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);

}