Loop over setTimeout в javascript

Question

У меня есть проблема «постоянно обновлять» изображение, которое снимается с моей камеры каждые 1 секунду. Прямо сейчас изображение меняется только на последний снимок, сделанный камерой. Любые идеи, как сделать эту работу ????

function reflashIPCam(){ 
     newImage = new Image(); 
     newImage.src = "image taken from the camera" + new Date().getTime(); 
     document.getElementById("IPCamIMG").src = newImage.src; 
    } 

    function playIPCamLoop(){ 
     for (var i=0;i<5;i++){ 
      delayFunction(); 
     } 
    } 

    function delayFunction(){ 
     setTimeout(reflashIPCam, 1000); 
    } 

Answer 1

Чтобы выполнить синхронизацию, я думаю, самый простой способ повторялись это с setInterval

intervalRef = setInterval(reflashIPCam, 1000); 

и если вы хотите, чтобы остановить его после того, как 5 секунд:

setTimeout("clearInterval(intervalRef)", 5000); 

Для получения данных из камеры, пожалуйста, смотрите access-from-the-browser-to-camera

Answer 2

Когда вы пишете

delayFunction() { 
    setTimeout(reflashIPCam, 1000); 
} 

вы программируете вызов из reflashIPCam функции 1000 мс с момента исполнения delayFunction.

Поскольку цикл является мгновенным, это означает, что вы программируете все вызовы в одно и то же время. Поэтому, конечно, вы можете увидеть только последнее исполнение.

Вы можете исправить это следующим образом:

function playIPCamLoop(){ 
    for (var i=0;i<5;i++){ 
     delayFunction(i+1); 
    } 
} 

function delayFunction(i){ 
    setTimeout(reflashIPCam, i*1000); 
}