Question

我正在做一个小骰子游戏来学习。我做的是我骰子X的次数碾压，随机减慢直到达到最终值，这就是＃34;中奖号码＆＃34;。

但我想在骰子上逐一执行scrumble。想象一下，我得到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();

它最终做的是同时运行两个骰子。

有什么建议吗？感谢。

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

像bergi一样：

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

使用链式setTimeouts的jQuery Promises

2 个答案: