sweetalert2 - ¿JavaScript proporciona un temporizador de alta resolución?
sweetalert loading (10)
Ver la respuesta de @ h3r3 a continuación. Es la respuesta correcta.
Los milisegundos son lo mejor que puedes esperar en JavaScript. Y, como dijiste, no es muy exacto. Consulte Pregunta de desbordamiento de pila Tiempo de microsegundo en JavaScript .
timer.js pretende proporcionar una resolución de hasta microsegundos, pero solo está disponible para Google Chrome .
Actualización : timer.js no admite resolución de microsegundos. Simplemente multiplica el recuento de milisegundos por 1000.
Lo sentimos, ¡no hay mejores noticias!
¿JavaScript proporciona un temporizador de alta resolución?
He escrito algunos motores de juegos desde cero, algunos en C, algunos en Java y algunos en Flash. Siempre sigo el mismo modelo básico cuando se trata de animaciones y gráficos interactivos. Crea una clase / estructura básica con el siguiente diseño:
void init() { /* Called once, preload essential resources here. */ }
void update(double time) { /* Updates game/animation state using high resolution time. */ }
void render(double time) { /* Updates screen graphics using high resolution time. */ }
void run()
{
double time;
init();
while (!done)
{
time = queryTime();
update(time);
render(time);
}
}
El tiempo es tan importante para suavizar las animaciones y los cálculos del estado del juego. En el código nativo de Windows, uso QueryPerformanceCounter() y QueryPerformanceFrequency() para realizar el rol de queryTime() en cada ciclo de juego y paso el tiempo para actualizar / renderizar. En Java, uso System.nanoTime() .
¿Cuál es el equivalente en JavaScript? Es decir, algunas funcionan como queryTime() que devuelve un valor de tiempo con un alto grado de precisión (sub milisegundos). Por lo que he escuchado, la mejor precisión que puedes obtener en JavaScript es de aproximadamente 15 ms ... lo cual es horrible para la animación.
A partir de ahora (25 de febrero de 2013), la calidad de los tiempos de alto rendimiento en Chrome 24 es bastante horrible.
var old = 0;
for (var i=0; i<10; i++) {
var t = window.performance.now();
var d = t - old;
old = t;
console.log(t + '' += '' +d);
}
produce algo como esto:
609689.000000013 += 609689.000000013
609689.9999999441 += 0.9999999310821295
609689.9999999441 += 0
609689.9999999441 += 0
609689.9999999441 += 0
609690.9999999916 += 1.0000000474974513
609690.9999999916 += 0
609690.9999999916 += 0
609691.9999999227 += 0.9999999310821295
609691.9999999227 += 0
Lo cual muestra que
1) El muestreo ocurre raramente
2) La precisión todavía está alrededor de 1 ms, no en el rango de microsegundos.
Además de las excelentes respuestas ya proporcionadas, también puede echar un vistazo a marky , un
temporizador de JavaScript de alta resolución basado en performance.mark / measure (461 bytes min + gz)
También incluye visualizaciones de herramientas de desarrollo y se prueba en una amplia gama de navegadores.
Casi todos los navegadores modernos ofrecen un temporizador de alta resolución. Es el estándar W3C de "Alta Resolución": http://www.w3.org/TR/hr-time/#sec-DOMHighResTimeStamp .
Le permite obtener una marca de tiempo precisa de menos de milisegundos llamando a window.performance.now () . Esto devuelve una marca de tiempo en ms, pero es un flotante por lo que aún obtiene una resolución de menos de milisegundos.
Los navegadores muy antiguos pueden implementar una versión "prefijada" de este estándar, por ejemplo, los navegadores basados en WebKit utilizados para implementar window.performance.webkitNow ()
Aquí hay un código que puede usar para obtener la marca de tiempo precisa cuando esté disponible y la alternativa a la precisión estándar, de lo contrario:
if (window.performance.now) {
console.log("Using high performance timer");
getTimestamp = function() { return window.performance.now(); };
} else {
if (window.performance.webkitNow) {
console.log("Using webkit high performance timer");
getTimestamp = function() { return window.performance.webkitNow(); };
} else {
console.log("Using low performance timer");
getTimestamp = function() { return new Date().getTime(); };
}
}
getTimestamp();
Tenga en cuenta que esta función getTimestamp () no devuelve un valor que represente la fecha / hora actual. El valor devuelto solo se puede usar para medir períodos de tiempo, restando dos marcas de tiempo diferentes. P.ej
var t1 = getTimestamp();
//... some other code
var t2 = getTimestamp();
console.log("Time delta: " + (t2 - t1));
Debido a que esto aparece cuando se busca JavaScript y un temporizador de alta resolución, vale la pena señalar que window.performance.now ahora es funcional (al menos en Google Chrome v. 26) y proporciona una resolución de ~ microsegundos.
var d = 0;
var p = window.performance;
for(var i=0; i<10; i++) {
d = -1 * (p.now() - p.now());
console.log(d*1000);
}
Me dio esto (en microsegundos):
5.0000089686363935
3.9999722503125668
1.00000761449337
1.00000761449337
1.00000761449337
1.9999861251562834
1.9999861251562834
1.00000761449337
1.00000761449337
0.9999785106629133
Ejecuté algunas estadísticas en algunos conjuntos de resultados de 10k +. El mínimo es de aproximadamente 1 microsegundo, y la media es de aproximadamente 1,25 microsegundos en mi máquina ( MacBook Air ). Ocasionalmente hay valores atípicos altos en la marca de más de 100 microsegundos, pero hubo resultados frecuentes por encima de 10 microsegundos.
Entonces, el temporizador de alta resolución ahora es capaz de sincronizar la resta a una resolución de microsegundos.
En lugar de while (true) / setInterval , use developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame recursivoAnimationFrame. Funcionará más suavemente que las animaciones basadas en tiempo de espera. Proporciona marcas de tiempo si necesita que su animación se ejecute en una ruta más lenta .
Este es el aspecto que debería tener el código en JavaScript, por lo que no bloquea la interfaz de usuario y no utiliza developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame que no funciona en todos los navegadores.
/* Called once, preload essential resources here. */
function init() {}
/* Updates game/animation state */
function update(time) {}
/* Updates screen graphics */
function render(time) {}
window.onload = function()
{
var time;
var done = false;
init();
// Using setTimeout passing zero makes the animate function run
// as soon as possible, but yielding first.
setTimeout(animate, 0);
function animate () {
time = new Date();
update(time);
render(time);
if (!done) {
setTimeout(animate, 0);
}
}
}
Un problema con este enfoque es que se puede llamar a la función animate() más a menudo de lo que se actualiza la pantalla (a 60 Hz no se actualizará más a menudo que abot cada 16 ms), lo que causa una renderización adicional que nunca llega a la pantalla. Es por eso que debes quedarte con requestAnimationFrame si es posible.
Justo ahora busco esa solución y encontré este hilo. Como puedo ver, todas las mediciones son incorrectas, porque nadie sabe cómo funciona la función console.log. Desde mi experiencia (y práctica) lleva demasiado tiempo, e incluso trabaja de forma asíncrona.
Simplemente compare estas muestras de código:
var old = 0;
for (var i=0; i<10; i++) {
var t = window.performance.now();
var d = t - old;
old = t;
console.log(t + '' += '' +d);
}
y esto
var old = 0;
var out = [];
for (var i=0; i<10; i++) {
var t = window.performance.now();
var d = t - old;
old = t;
out.push(t + '' += '' +d)
}
console.log(out);
Node.js también tiene un temporizador de alta resolución.
process.hrtime()
Puede usar transformaciones CSS 3 para animaciones simples que obtendrán aceleración de hardware completa y se ejecutarán sedosamente suaves en la mayoría de los navegadores modernos ... Si espera animaciones fluidas en WebGL no tiene suerte, porque no hay precisión de menos de un milisegundo en JavaScript.
Actualmente, hay un gran avance en la habilitación de tecnologías relacionadas con juegos para la web (ver por ejemplo el borrador de bloqueo del mouse que está siendo desarrollado activamente, nuestra API pantalla completa ... Tal vez puedas iniciar el movimiento de temporizadores de precisión microsegundos en JavaScript ;-)