DOM mất quá nhiều thời gian để phản hồi

Question

Tôi đang cố gắng "GET" một hình ảnh từ một tệp 100ms bằng cách thay đổi nguồn của đối tượng DOM. Tôi có thể thấy rằng cuộc gọi GET thực sự trả về đúng 100ms mỗi hình ảnh, nhưng hình ảnh thực tế chỉ hiển thị các cập nhật sau mỗi giây. Dưới đây là đoạn mã JavaScript của tôi mà không công việc:

<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: Thay đổi chức năng sử dụng gia tải như sau:

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

Tuy cập nhật cùng tốc độ (mà thực sự là mỗi 5 giây, không 1s như đã nêu ban đầu). Vì vậy, đối với mỗi 50 nhận được yêu cầu (10/giây trong 5 giây) phần tử chỉ được cập nhật một lần.

Một lưu ý quan trọng khác: Giải pháp thứ hai này hoạt động hoàn hảo trên máy cục bộ của tôi, nơi tôi gặp sự cố khi tôi chạy cùng một trang web tắt máy chủ từ xa.

Answer 1

tôi sẽ đề nghị sử dụng các handler onload cho hình ảnh thay vì một thời gian chờ cố định:

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

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

Trong trường hợp này, bạn sẽ cần phải nhận được tên tập tin từ bên trong hàm chứ không phải đi qua nó như một param.