javascript - 等到setInterval()完成

我想在我的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()的最后一个数字返回到另一个函数。

最佳答案

您偶然发现大多数人在与异步编程取得联系时遇到的陷阱。

您无法“等待”超时/时间间隔完成-尝试这样做将无法工作或阻止整个页面/浏览器。延迟后应运行的任何代码都需要在“完成”时从传递给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
});

关于javascript - 等到setInterval()完成，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11055530/