I am building a spinning wheel that is filled by database which I do the following code but at the time of executing it I get
rotateWheel is not defined
supposedly what is wrong is
spinTimeout = setTimeout("rotateWheel()", 3000);
This is the code I'm running:
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();
});
});
}