[Resuelto] javascript itinerancia de un objeto dentro de un timer

[EFEX]

Tengo un intervalo de tiempo ejecutandoce que quiero coincidir con el tiempo transcurrido con un objeto, pero el tiempo trancurrido no coincide con el tiempo del objeto. Estoy pensando la mejor forma de hacerlo como se les ocurriria a ustedes realizarlo

Código (javascript) [Seleccionar] Expandir


var testJSON = {
   "9352": {
       "data": {
           "x": 220,
           "y": 188
       },
       "time": 9352
   },
   "9452": {
       "data": {
           "x": 221,
           "y": 186
       },
       "time": 9452
   },
   "9954": {
       "data": {
           "x": 221,
           "y": 184
       },
       "time": 9954
   },
   "10054": {
       "data": {
           "x": 221,
           "y": 184
       },
       "time": 10054
   },
   "10154": {
       "data": {
           "x": 221,
           "y": 183
       },
       "time": 10154
   },
   "10554": {
       "data": {
           "x": 220,
           "y": 183
       },
       "time": 10554
   },
   "10654": {
       "data": {
           "x": 218,
           "y": 182
       },
       "time": 10654
   },
   "10754": {
       "data": {
           "x": 217,
           "y": 181
       },
       "time": 10754
   }
};

function handleActivity() {
   var timeElapsed, activity, last;
   var startingTime = Date.now();

   if (testJSON) {
       activity = testJSON;
       last = Object.keys(activity)[Object.keys(activity).length - 1];

       console.log('total: ' + Object.keys(activity).length);

       var timer = setInterval(function() {

           timeElapsed = parseInt(((Date.now() - startingTime) / 1000).toFixed(3).replace(/\./g, ''));

           if (true) {
               console.log(activity[timeElapsed]);
           }

           if (last <= timeElapsed) {
               clearInterval(timer);
           }

       }, 100);
   }
}

Se ejecutara por 10s cuando termina deberia mostrar los 8 objetos encontrados pero como el intervalo se saltea ciertos numeros no mostrara nada o solo alguno de los 8.
Ya estoy cansado no puedo pensar mas  

[#!drvy]

Creo que lo tienes crudo.

Ningún navegador da timestamps seguidos.. algunos incluso se saltan varios ciclos para ahorrar batería.. aparte, tenemos en cuenta que cada operación tarda X tiempo en realizarse (el calculo de timeElapsed pj) y eso añade tiempo perdido.

¿ Para que necesitas el timer exactamente ? Quizás podamos encontrar alguna alternativa.

Saludos

[EFEX]

Trato de obtener la posicion del mouse, guardarlo y despues recrearlo. Queria ser algo mas preciso con el tiempo, pero creo que mejor seria dividir el tiempo en segundos ? o llegare al mismo problema?

[#!drvy]

Lo único que se me ocurre es ampliar el tiempo entre capturas a un valor seguro.. quizás 500ms podría valer.. pero se pierde precisión :/

Saludos

[[u]nsigned]

Lo correcto seria capturar el evento mouve del mouse y asyncronicamente (promise) guardar las coordenaas en un array. Asi es mas fluido y no bloqueante,

[[u]nsigned]

Aca hay un ejemplo, en vez de aplicarlo dentro del cuadrado deberias hacerlo en body o html

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousemove

[EFEX]

Al fin pude con esto de la siguiente forma..

Código (javascript) [Seleccionar] Expandir


var testJSON = {"9352":{"data":{"x":220,"y":188},"type":"mouseMove","time":9352},"9452":{"data":{"x":221,"y":186},"type":"mouseMove","time":9452},"9954":{"data":{"x":221,"y":184},"type":"mouseMove","time":9954},"10054":{"data":{"x":221,"y":184},"type":"mouseMove","time":10054},"10154":{"data":{"x":221,"y":183},"type":"mouseMove","time":10154},"10554":{"data":{"x":220,"y":183},"type":"mouseMove","time":10554},"10654":{"data":{"x":218,"y":182},"type":"mouseMove","time":10654},"10754":{"data":{"x":217,"y":181},"type":"mouseMove","time":10754}};
var elapsedTimeReplay = 0;
//Copiamos nuestro objeto y paso a array
var activitySession = Object.values(testJSON);

function handleActivity(){
  if (Object.keys(testJSON).length > 0 ) {

    //Borrar el primer elemento de nuestro array
    var parts = activitySession.splice(0, 1),
        currentTime;

    currentTime = parts[0].time;

    setTimeout(function(){

      //handleMouseEmulated
      console.log('move mouse ' + testJSON[currentTime].time);

      elapsedTimeReplay = currentTime;
      handleActivity(); // Siguiente elemento de nuestro array
     
    }, currentTime - elapsedTimeReplay);

  }
}

handleActivity();