DOM lleva demasiado time para reactjsr

Estoy tratando de "OBTENER" una image de un file cada 100 ms cambiando la fuente de un object DOM. Veo que la llamada GET devuelve la image correcta cada 100 ms, pero la visualización de la image real solo se actualiza una vez por segundo. Aquí está mi código de JavaScript que hace el trabajo:

<img id="videoDisplay" style="width:800; height:600"/> <script type="text/javascript"> function videoDataPoll(filename) { setTimeout(function() { document.getElementById("videoDisplay").src = filename + "?random="+(new Date()).getTime(); videoDataPoll(filename); }, 100); } </script> 

ACTUALIZACIÓN: se modificó la function para usar la precarga de la siguiente manera:

 <canvas id="videoDisplay" style="width:800; height:600"/> <script type="text/javascript"> var x=0, y=0; var canvas, context, img; function videoDataPoll() { var filename = getFilename(); canvas = document.getElementById("videoDisplay"); context = canvas.getContext("2d"); img = new Image(); img.onload = function() { context.drawImage(img, x, y); setTimeout("videoDataPoll()", 100); } img.src = filename + "?random=" + (new Date()).getTime(); } <script> 

Aún se actualiza a la misma velocidad (que en realidad es cada 5 segundos, no 1s como se indicó originalmente). Entonces, por cada 50 requestes de obtención (10 / seg por 5 segundos) el elemento solo se actualiza una vez.

Otra nota importante: esta segunda solución funciona perfectamente en mi server local, donde me encuentro con el problema cuando estoy ejecutando la misma página web desde un host remoto.

Sugeriría usar el controller de carga para la image en lugar de un time de espera fijo:

  function videoDataPoll(filename) { document.getElementById("videoDisplay").src = filename + "?random="+(new Date()).getTime(); } document.getElementById("videoDisplay").onload = videoDataPoll; videoDataPoll(filename); 

En este caso, necesitaría get el nombre de file dentro de la function en lugar de pasarlo como un param.