骰子效果 - 如何顯示假結果和真正的結果（JavaScript）

我的JavaScript是從我的Java Servlet獲得骰子的結果。我在我的html頁面中使用了一個標籤來顯示骰子結果，但是我想製作一個便宜的效果，在實際結果顯示之前，它將在屏幕上顯示不斷變化的數字。，因爲這是按下「擲骰子」按鈕後發生的ajax調用，那麼首先顯示真實結果，然後在javascript頁面中隨機選擇的結果顯示在... （我試過用setInterval ））。你能幫我找到一個很好的方法去做那個「效果」嗎？骰子效果 - 如何顯示假結果和真正的結果（JavaScript）

謝謝！這是我的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); 
}

來源

2014-10-10 mac-man

你爲什麼纔剛剛開始在你的成功函數來顯示的隨機數？當你發出AJAX請求時，你不應該開始顯示它們，然後在成功（或錯誤）時停止*顯示它們嗎？ – 2014-10-10 16:16:37

你可以很容易地解決這個問題 - 你的代碼幾乎就在那裏。而不是在回調函數設置的結果，你可以添加一個額外的參數，你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調用返回

來源

2014-10-10 16:16:04

謝謝！完美的作品:) – 2014-10-10 21:50:58

骰子效果 - 如何顯示假結果和真正的結果（JavaScript）

回答

相關問題