jQuery Promise with chained setTimeouts

我正在做一個小骰子游戲來學習。我所做的是我碾壓骰子X的次數，不斷降低隨機數直到它達到最終值，這就是「獲勝數」。jQuery Promise with chained setTimeouts

但我想在骰子上執行scrumble 1。想象一下，我得到了2.後來我做了一些縮放效果。我在想我可以通過使用承諾來實現這一點，但並不適合我，我不知道我錯過了什麼。

這裏的JS代碼：

var counter = 0.8; 
var diceNumber = 0; 

var rollDice = function(diceId){ 
    var dfd = new $.Deferred(); 

    $('#' + diceId).removeClass('idle'); 

    counter *= 1.2; 

    diceNumber = Math.round(Math.random()*5) + 1; 

    $('#' + diceId).removeClass(); 
    $('#' + diceId).addClass('dice_' + diceNumber); 

    if(counter < 800) { 
     timeout = setTimeout(rollDice, counter, diceId); 
    }else{ 
     $('.winner').text(diceNumber); 
     $('#' + diceId).removeClass(); 
     $('#' + diceId).addClass('animate'); 
     $('#' + diceId).addClass('dice_' + diceNumber) 
     .animate({ zoom: '1.3' }, 200) 
     .animate({ zoom: '1' }, 100); 

     dfd.resolve(); 

     return dfd.promise(); 
    } 
} 


var startToDice = function() { 
    rollDice('dice_1').then(rollDice('dice_2')); 
} 

startToDice();

什麼它最後做的是同時運行同時切成小方塊。

有什麼建議嗎？謝謝。

來源

2016-04-27 msqar

只有你的'else'分支返回一個承諾？ – Bergi

該承諾總是同步解決？ – Bergi

'then'需要一個回調函數，而不是一個調用的結果！ – Bergi

你在正確的軌道上。我無法測試，因爲我沒有到位所有元素，但嘗試了這一點：

var counter = 0.8; 
var diceNumber = 0; 

var rollDice = function(diceId){ 
    var dfd = new $.Deferred(); 

    var roll = function() { 
     $('#' + diceId).removeClass('idle'); 

     counter *= 1.2; 

     diceNumber = Math.round(Math.random()*5) + 1; 

     $('#' + diceId).removeClass(); 
     $('#' + diceId).addClass('dice_' + diceNumber); 

     if(counter < 800) { 
      timeout = setTimeout(roll, counter); 
     }else{ 
      $('.winner').text(diceNumber); 
      $('#' + diceId).removeClass(); 
      $('#' + diceId).addClass('animate'); 
      $('#' + diceId).addClass('dice_' + diceNumber) 
      .animate({ zoom: '1.3' }, 200) 
      .animate({ zoom: '1' }, 100); 

      dfd.resolve(); 
     } 
    } 

    roll(); 

    return dfd.promise(); 
} 


var startToDice = function() { 
    rollDice('dice_1').then(function(){ 
     rollDice('dice_2'); 
    }); 
} 

startToDice();

讓你當你運行它，這樣我就可以根據需要進行調整得到任何錯誤，我知道。

來源

2016-04-27 16:42:32 aaronofleonard

好方法。但仍然沒有工作，不知道爲什麼，因爲你做了什麼對我有意義。在控制檯上沒有錯誤。 – msqar

@msqar那麼現在發生了什麼？我很肯定你沒有得到'無法讀取屬性'，然後'未定義'錯誤，那麼下一步是什麼？ :) – aaronofleonard

是的，我沒有得到這個錯誤了，因爲atm我從外部函數（rollDice）返回承諾。現在結構更好，但第二個骰子沒有開始滾動。你知道爲什麼？ – msqar

像由BERGI comented：

var startToDice = function() { 
    rollDice('dice_1').then(function() { rollDice('dice_2'); }); 
}

來源

2016-04-27 16:32:14

感謝您的幫助。事情是，用我現在的代碼，如果我這樣做。我在控制檯上看到一個錯誤，說'不能讀取屬性'，然後'未定義'，因爲我只在其他內部返回一個承諾。看起來像我目前的函數結構可能不正確。 – msqar

嗯不太確定，我現在通過所有參數。 – msqar

jQuery Promise with chained setTimeouts

回答

相關問題