Loop over setTimeout in javascript

Question

I have a problem to 'continuously refresh' the picture which is captured from my camera every 1 second. Right now the picture only changes to the last picture taken by the camera. Any ideas how to make this work????

    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);
    }

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

To accomplish the timing, I would think the simplest way to recur is with a setInterval

intervalRef = setInterval(reflashIPCam, 1000);

and if you want to stop it after 5 seconds:

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

For getting data from the camera, please see access-from-the-browser-to-camera

edited May 23 '17 at 12:05

Community

1
1

answered Sep 11 '13 at 14:49

Joe

25,000
3
22
44

thanks! just with a little modification of your code, mine works perfectly nice! Thanks for your help – Hugh H Sep 11 '13 at 15:10

score 0 · Answer 2 · answered Sep 11 '13 at 14:33

When you write

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

you program the call of the reflashIPCam function 1000 ms from the time of execution of delayFunction.

As the loop is instantaneous, that means you program all calls for the same time. So of course you can only see the last execution.

You can fix it like this :

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

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

Hi dystroy, I just tried your code, the problem is still there. It only shows the last picture taken. The picture is same as the startup one during the mean time — Hugh H, Sep 11 '13 at 14:37

Loop over setTimeout in javascript

2 Answers2