Me gustaría agregar un pequeño efecto de rodar dados a mi código Javascript. Creo que una buena manera es usar elsetInterval() método. Mi idea era seguir el código (solo para pruebas):

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

Ahora me gustaría esperar el setInterval hasta que esté listo. Así que he añadido un setTimeout.

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

Este código funciona bastante bien. Pero en mi código principal elroleDice() La función devuelve un valor. Ahora no sé cómo podría manejar eso ... No puedo regresar de lasetTimeout(). Si agrego un retorno al final de la función, el retorno se elevará a rápido. ¿Alguien tiene una idea, cómo podría arreglar eso?

Editar Hmm, está bien, entiendo cuál es la dosis de devolución de llamada y creo que sé cómo funciona, pero todavía tengo el problema. Creo que es más un problema de "interfaz" ... Aquí mi código:

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

La funciónrnd() Debería esperar y devolver el valor ... Estoy un poco confundido. En este momento no tengo ni idea de cómo seguir ... El código espera elvar callback... ¿Pero cómo lo pude combinar con la devolución? Me gustaría ejecutar la animación y volver después de que el último número conrnd() a otra función.