jQuery Promises with chained setTimeouts

jQuery Promises with chained setTimeouts

本文关键字：setTimeouts chained with Promises jQuery      更新时间：2023-09-26

我正在做一个小骰子游戏来学习。我所做的是我揉搓骰子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();

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

有什么建议吗？谢谢。

你走在正确的轨道上。我无法测试，因为我没有准备好所有元素，但请尝试一下：

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

如果您在运行它时遇到任何错误，请告诉我，以便我可以根据需要进行调整。

就像被bergi嘟囔：

var startToDice = function() {
    rollDice('dice_1').then(function() { rollDice('dice_2'); });
}
相关文章：