Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

179
Vistas
Hacer un reloj que tarda 2560 ms en completar una revolución en JavaScript

Estoy tratando de hacer un reloj para una tarea de Libet, una tarea cognitiva utilizada por psicólogos. Por convención, estos relojes tardan 2560 ms en completar una revolución. El mío parece estar funcionando mucho más lento y puedo entender por qué.

He hecho un ejemplo del problema aquí: https://jsfiddle.net/Sumoza/re4v7Lcj/8/

En cada iteración de setInterval con un retraso de 1 ms, aumento el ángulo de rotación de la mano en (Math.PI*2)/2560, es decir, 1/2560 de un círculo en radianes. Entonces, incrementando uno de estos cada ms debería completar el círculo en ese número de ms. Como puede ver en el reloj, esto funciona un poco más lento. ¿Alguien puede arrojar alguna luz sobre por qué? Curiosamente, * 10 parece parecerse mucho más a lo que quiero, pero eso no tiene mucho sentido para mí, así que desconfío de la solución. JS relevante del violín a continuación. Gracias por cualquier ayuda.

 var time = 0; var rad_tick = (Math.PI*2)/2560; //radians per tick: last number is ms per revolution // Draw Clock const clock = document.getElementById('clock') const clock_ctx = clock.getContext('2d') clock_ctx.translate(clock.width/2, clock.height/2); radius = (clock.height/2) * 0.7; function drawClock() { clock_ctx.clearRect(-clock.width/2, -clock.height/2, clock.width, clock.height); clock.style.backgroundColor = 'transparent'; clock_ctx.beginPath(); clock_ctx.arc(0, 0, radius, 0 , 2 * Math.PI); clock_ctx.stroke(); } drawClock(); // Draw Hand const hand = document.getElementById('hand') const hand_ctx = hand.getContext('2d') hand_ctx.translate(hand.width/2, hand.height/2); function drawHand(time){ hand_ctx.clearRect(-hand.width/2, -hand.height/2, hand.width, hand.height); hand_ctx.beginPath(); hand_ctx.moveTo(0,0); hand_ctx.rotate(time); hand_ctx.lineTo(0, -radius*0.9); hand_ctx.stroke(); hand_ctx.rotate(-time); } function drawTime(){ time+=rad_tick;//*10 drawHand(time) } var intervalId = setInterval(drawTime, 1);
about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

Prueba esto

 var starttime = new Date().getTime(); function drawTime() { var elapsed = new Date().getTime() - starttime; var time = elapsed % 2560; time = time * rad_tick; console.log(elapsed + "->" + time); drawHand(time) }
about 4 years ago · Juan Pablo Isaza Denunciar

0

Le pide a setInterval que llame a su devolución de llamada cada 1 ms, pero ¿ realmente lo llama cada 1 ms?

Prueba este código:

 let cnt = 0; setInterval(() => cnt++, 1); setTimeout(() => { console.log(cnt); }, 1000);

Para mí, imprime algo entre 230 y 235. Así que parece que el intervalo mínimo real (promedio) para mí es un poco más de 4 ms.

about 4 years ago · Juan Pablo Isaza Denunciar

0

Agregando a Stig, dado que javascript no es muy rápido cuando se trata de estas cosas, no será muy preciso. Usar algo como getTime() permitirá la sincronización adecuada. ¿Qué tal si llama a getTime en su función drawTime , de modo que alrededor de cada milisegundo, verifique el tiempo real y use ese valor?

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda