等到setInterval（）完成 [英] Wait until setInterval() is done

问题描述

我想在我的Javascript代码中添加一个小骰子滚动效果。我认为一个好方法是使用 setInterval（）方法。我的想法是关注代码（仅用于测试）：

I would like to add a small dice rolling effect to my Javascript code. I think a good ways is to use the setInterval() method. My idea was following code (just for testing):

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。

Now I would like to wait for the setInterval until it is done. So I added a setTimeout.

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

此代码工作正常。
但是在我的主代码中， roleDice（）函数返回一个值。现在我不知道如何处理...我无法从 setTimeout（）返回。如果我在函数末尾添加一个返回值，则返回将提升为快速。有没有人有想法，我怎么能解决这个问题？

This code works quite okay. But in my main code the roleDice() function returns a value. Now I don’t know how I could handle that... I can’t return from the setTimeout(). If I add a return to the end of the function, the return will raised to fast. Does anyone have a idea, how I could fix that?

编辑
嗯，好吧我理解回调剂量和我我想我知道它是如何工作的，但我还是有问题。我认为这更像是一个接口问题...
这里我的代码：

Edit Hmm, okay I understand what the callback dose and I think I know how it works but I have still the problem. I think it’s more a "interface" problem... Here my code:

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（）的最后一个数字返回到另一个函数。

The function rnd() should wait and return the value… I’m a little bit confused. At the moment I have no clue how to going on... The code wait for the var callback... but how I could combined it with the return? I would like to run the animation and return after that the last number with rnd() to a other function.

推荐答案

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

You stumbled into the pitfall most people hit at some point when they get in touch with asynchronous programming.

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

You cannot "wait" for an timeout/interval to finish - trying to do so would not work or block the whole page/browser. Any code that should run after the delay needs to be called from the callback you passed to setInterval when it's "done".

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

然后你可以这样使用它：

You then use it like this:

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

这篇关于等到setInterval（）完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！