等到setInterval()完成

Question

我想在我的Javascript代码中添加一个小骰子滚动效果.我认为一个好方法是使用该setInterval()方法.我的想法是遵循代码(仅用于测试):

function roleDice() {
        var i = Math.floor((Math.random() * 25) + 5);   
        var j = i;
        var test = setInterval(function(){
            i--;
            document.getElementById("dice").src = "./images/dice/dice" + Math.floor((Math.random() * 6) + 1) + ".png";
            if(i < 1) {
                    clearInterval(test);
                }

            }, 50);     
    }

现在我想等待setInterval,直到完成.所以我添加了一个setTimeout.

setTimeout(function(){alert("test")}, (j + 1) * 50);

这段代码工作得很好.但在我的主代码中,该roleDice()函数返回一个值.现在我不知道我怎么能处理那个...我无法从那里回来setTimeout().如果我在函数末尾添加一个返回值,则返回将提升为快速.有没有人有想法,我怎么能解决这个问题？

编辑 嗯,好吧,我明白回调剂量是什么,我想我知道它是如何工作的,但我仍然有问题.我认为这更像是一个"界面"问题......我的代码:

function startAnimation(playername, callback) {
    var i = Math.floor((Math.random() * 25) + 5);
    var int = setInterval(function() {
        i--;
        var number = Math.floor((Math.random() * 6) + 1);
        document.getElementById("dice").src = "./images/dice/dice" + number + ".png";
        if(i < 1) {
            clearInterval(int);
            number = Math.floor((Math.random() * 6) + 1);
            addText(playername + " rolled " + number);
            document.getElementById("dice").src = "./images/dice/dice" + number + ".png";
            callback(number);
        }
    }, 50);
}

function rnd(playername) {
    var callback = function(value){
        return value; // I knew thats pointless...
    };
    startAnimation(playername, callback);
}

该函数rnd()应该等待并返回值...我有点困惑.目前我不知道如何继续...代码等待,var callback...但我如何将它与回报结合起来？我想运行动画,然后将最后一个数字返回rnd()到另一个函数.

Answer 1

当你接触到异步编程时,你偶然发现了大多数人在某些时候遇到的陷阱.

您不能"等待"超时/间隔完成 - 尝试这样做将无法工作或阻止整个页面/浏览器.任何应该在延迟之后运行的代码都需要从你setInterval完成时传递给它的回调中调用.

function rollDice(callback) {
    var i = Math.floor((Math.random() * 25) + 5);
    var j = i;
    var test = setInterval(function() {
        i--;
        var value = Math.floor((Math.random() * 6) + 1);
        document.getElementById("dice").src = "./images/dice/dice" + value + ".png";
        if(i < 1) {
            clearInterval(test);
            callback(value);
        }
    }, 50);
}

然后你就像这样使用它:

rollDice(function(value) {
    // code that should run when the dice has been rolled
});

Answer 2

TheifMaster答案的更新：

您现在可以使用Promises

像回调一样，您可以使用Promises来传递在程序完成运行时调用的函数，如果使用，reject还可以处理Promises的错误。

function rollDice() {
  return new Promise((resolve, reject) => {
    const dice = document.getElementById("dice")

    let i = Math.floor((Math.random() * 25) + 5)

    const intervalId = setInterval(() => {
      const diceValue = Math.floor((Math.random() * 6) + 1)

      dice.src = `./images/dice/dice${diceValue}.png`

      if (--i < 1) {
        clearInterval(intervalId)
        resolve(diceValue)
      }
    }, 50)
  })
}

然后像这样使用它：

rollDice().then(value => alert(`Dice rolled: ${value}`))