1

Estoy construyendo una ruleta giratoria que es llenada por base de datos lo cual hago el siguiente codigo pero al hora de ejecutarlo me sale

rotateWheel is not defined

supuestamente lo que est mal es

 spinTimeout = setTimeout("rotateWheel()", 3000);

ESte es codigo que estoy ejecutando:

var startAngle = 0;
var arc = Math.PI / 5;
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var ctx;
var colors;
var restaraunts;

function girar_ruleta() {

var dato;
var mesa = $("#numero_unico").val();
$('#ruleta_giratoria').modal('show');
$.post("php/traer_madres.php", {mesa: mesa}, function (data) {
    //si tu data es un string agrega
    data = $.parseJSON(data);
    dato = [];
    for (element in data.data) {
        dato.push(data.data[element]["nombre_completo"])
    }
    colors = ["#d50000", "#8bc34a", "#ffeb3b", "#009688", "#ff5722", "#9e9e9e", "#e91e63", "#9c27b0", "#3f51b5", "#009688"];
    restaraunts = dato;
    draw();

    function draw() {
        drawRouletteWheel();

    }

    function drawRouletteWheel() {
        var canvas = document.getElementById("confetti-intro");
        if (canvas.getContext) {
            var outsideRadius = 340;
            var textRadius = 190;
            var insideRadius = 75;
            ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, 400, 400);
            ctx.strokeStyle = "white";
            ctx.lineWidth = 2;
            ctx.font = "15px Arial";
            for (var i = 0; i < colors.length; i++) {
                var angle = startAngle + i * arc;
                ctx.fillStyle = colors[i];
                ctx.beginPath();
                ctx.arc(450, 450, outsideRadius, angle, angle + arc, false);
                ctx.arc(450, 450, insideRadius, angle + arc, angle, true);
                ctx.stroke();
                ctx.fill();
                ctx.save();
                ctx.shadowOffsetX = -1;
                ctx.shadowOffsetY = -1;
                ctx.shadowBlur = 0;
                ctx.fillStyle = "#FFFFFF";
                ctx.translate(450 + Math.cos(angle + arc / 2) * textRadius, 450 + Math.sin(angle + arc / 2) * textRadius);
                ctx.rotate(angle + arc / 25 + Math.PI / 25);
                var text = restaraunts[i];
                ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
                ctx.restore();
            }
            //Fecha
            ctx.fillStyle = "black";
            ctx.beginPath();
            ctx.moveTo(450 - 8, 450 - (outsideRadius + 10));
            ctx.lineTo(450 + 8, 450 - (outsideRadius + 10));
            ctx.lineTo(450 + 8, 450 - (outsideRadius - 10));
            ctx.lineTo(450 + 18, 450 - (outsideRadius - 10));
            ctx.lineTo(450 + 0, 450 - (outsideRadius - 26));
            ctx.lineTo(450 - 18, 450 - (outsideRadius - 10));
            ctx.lineTo(450 - 8, 450 - (outsideRadius - 10));
            ctx.lineTo(450 - 8, 450 - (outsideRadius + 10));
            ctx.fill();
        }
    }

    function rotateWheel() {
        spinTime += 20;
        if (spinTime >= spinTimeTotal) {
            stopRotateWheel();
            return;
        }
        var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
        startAngle += (spinAngle * Math.PI / 180);
        drawRouletteWheel();
         spinTimeout = setTimeout("rotateWheel()", 3000);
    }

    function stopRotateWheel() {
        clearTimeout(spinTimeout);
        var degrees = startAngle * 180 / Math.PI + 90;
        var arcd = arc * 180 / Math.PI;
        var index = Math.floor((360 - degrees % 360) / arcd);
        ctx.save();
        ctx.font = '15 px Arial';
        ctx.fillStyle = "black";
        var text = restaraunts[index];
        ctx.fillText(text.replace(/^\s*|\s*$/g, ""), 450 - ctx.measureText(text.replace(/^\s*|\s*$/g, "")).width / 2, 450 + 10);
        ctx.restore();
    }

    function easeOut(t, b, c, d) {
        var ts = (t /= d) * t;
        var tc = ts * t;
        return b + c * (tc + -3 * ts + 3 * t);
    }

    $("#ivan_more").click(function () {
        spinAngleStart = Math.random() * 10 + 10;
        spinTime = 0;
        spinTimeTotal = Math.random() * 3 + 4 * 2000;
        rotateWheel();
    });
});

}

1
  • 1
    En SetTimeout, no va entre comillas el nombre de la funcion
    – FederHico
    Commented el 11 may. 2017 a las 20:38

1 respuesta 1

0

Escribelo así, sin comillas y los parentesis

setTimeout(rotateWheel, 3000)
1
  • Gracias, espero que me califiques par no perder mi reputacion. Gracias Commented el 12 may. 2017 a las 16:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.