javascript - 等到 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() 返回。如果我在函数末尾加一个return，return 会上升太快。有谁知道我该如何解决这个问题？

编辑 嗯，好吧，我明白回调的作用，我想我知道它是如何工作的，但我仍然有问题。我认为这更像是一个“接口(interface)”问题...... 这是我的代码:

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 回调... 但是我如何将它与返回结合起来？我想运行动画并在最后一个带有 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
});