jQueryはsetTimeoutsを連鎖して約束します

Question

私はちょっとしたサイコロのゲームをやっています。 私がしていることは、サイコロのX回のスクラブルで、最終値に達するまでランダムな速度を遅くしていくことです。

しかし、私はダイス上でスクランブルを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(); 

そして、何、それはやって終了すると同時に、両方のサイコロを実行しているが。

アドバイスはありますか？ありがとう。 bergiによってcomented

Answer 1

あなたは正しい軌道に乗っています。私は場所にすべての要素を持っていない原因テストが、これを試してみることができませんでした：

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

あなたはので、私は必要に応じて調整を行うことができ、それを実行するときに、すべてのエラーを取得する場合、私に教えてください。

Answer 2

同様：

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