DOM takes too long to react

Question

I'm trying to "GET" an image from a file every 100ms by changing the source of a DOM object. I can see that the GET call is indeed returning the correct image every 100ms, but the actual image display only updates once a second. Here's my JavaScript code that does the work:

<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>

UPDATE: Changed the function to use preloading as follows:

<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>

Still updates at the same speed (which is actually every 5 seconds, not 1s as stated originally). So for every 50 get requests (10/sec for 5 seconds) the element only gets updated once.

Another important note: This second solution works perfectly on my localhost, where I run into the issue is when I'm running the same webpage off of a remote host.

Answer 1

I would suggest to use the onload handler for the image instead of a fixed timeout:

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

  document.getElementById("videoDisplay").onload = videoDataPoll;
  videoDataPoll(filename);

In this case you would need to get the filename from inside the function rather than passing it as a param.