Question

我的javascript从我的Java Servlet获得了一个骰子结果。我在我的html页面中使用了一个标签来显示骰子结果，但是我想制作一个便宜的效果，它会在真实结果显示之前在屏幕上显示更改的数字。因为这是按下＆＃34;滚动骰子后发生的ajax调用＆＃34;按钮，然后显示真实结果，我在javascript页面中随机选择的那些显示在......之后（我尝试使用setInterval（））。你能帮我找到一个很好的方法吗？＃34;影响＆＃34;？

谢谢！这是我的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);
}

Answer 1

你可以很容易地解决这个问题 - 你的代码几乎就在那里。您可以在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);
   }

这是一个小提琴的链接 - 我只是直接调用你的相关函数而不是回调内部用于演示目的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调用返回时设置实际数字

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

1 个答案: