5

DOM オブジェクトのソースを変更して、100 ミリ秒ごとにファイルから画像を「取得」しようとしています。GET 呼び出しが実際に 100 ミリ秒ごとに正しい画像を返していることがわかりますが、実際の画像表示は 1 秒に 1 回しか更新されません。作業を行う私の JavaScript コードは次のとおりです。

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

更新: 次のようにプリロードを使用するように関数を変更しました。

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

それでも同じ速度で更新されます (これは、最初に述べた 1 秒ではなく、実際には 5 秒ごとです)。したがって、50 の get リクエスト (5 秒間で 10/秒) ごとに、要素は 1 回だけ更新されます。

もう 1 つの重要な注意事項: この 2 番目の解決策は、ローカルホストで完全に機能します。問題が発生するのは、リモート ホストから同じ Web ページを実行している場合です。

4

1 に答える 1

2

固定タイムアウトの代わりに、画像に onload ハンドラーを使用することをお勧めします。

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

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

この場合、パラメータとして渡すのではなく、関数内からファイル名を取得する必要があります。

于 2013-05-14T14:05:53.843 に答える