DOM zbyt długo reaguje

Question

Próbuję "GET" obrazu z pliku co 100ms, zmieniając źródło obiektu DOM. Widzę, że wywołanie GET rzeczywiście zwraca poprawny obraz co 100ms, ale rzeczywisty obraz jest aktualizowany tylko raz na sekundę. Oto mój kod JavaScript, który działa:

<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: Zmieniono funkcja używać wstępnego ładowania następująco:

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

Wciąż aktualizuje przy tej samej prędkości (który jest rzeczywiście co 5 sekund, nie 1s jak pierwotnie stwierdzono). Tak więc na każde 50 żądań otrzymania (10/sek przez 5 sekund) element jest aktualizowany tylko raz.

Kolejna ważna uwaga: to drugie rozwiązanie działa idealnie na moim lokalnym hoście, gdzie napotkam problem, gdy uruchamiam tę samą stronę ze zdalnego hosta.

Answer 1

Proponuję korzystać z obsługi onload dla obrazu zamiast ustalonego limitu czasu:

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

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

w tym przypadku trzeba uzyskać nazwę pliku od wewnątrz funkcji zamiast przekazaniem go jako param.