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

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

本文关键字：结果 JavaScript 显示 最后      更新时间：2023-09-26

我的javascript正在从我的Java Servlet中获得骰子结果。我在我的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的链接-我只是直接调用您的相关函数，而不是在回调中进行演示http://jsfiddle.net/c9nqthjd/

如果您想在进行ajax调用之前启动动画，基本上是作为占位符动画，直到实际结果可用，您可以执行以下操作：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);
}

因此，您基本上是在单击按钮时开始动画，然后在ajax调用返回

时清除间隔并设置实际数字
相关文章：