Question

I use the script beneath to refresh a webcam image. It refreshes every 18 seconds and after 8 refresh it stops refreshing. I have a feeling it does not cancel it correctly. Because after some time I see the loading sign going haywire. Is there something wrong with my script?

var count = 0;
function CamRefresh() {
    count++;
    if(count > 8) clearInterval(timeout);
    updatecam();
}
var timeout = setInterval(CamRefresh, 18000);

});

function updatecam() {
$('#loading').show('fast');
$('#activecam').attr('src', 'http://weeg.binaer.no/weeg_com/nesjordet.jpg?time='+Date());
$('#loading').hide('slow');
$('#currentswitch').hide(1500);
$('#dayswitch').show();
}

Answer 1

I suspect that the animation of your loading element in your updatecam() function has a timing issue if the previous animation didn’t finish yet – I would chain a stop() in there. Try this:

function updatecam() 
{
    $('#loading').show('fast');
    $('#activecam').attr('src', 'http://weeg.binaer.no/weeg_com/nesjordet.jpg?time='+Date());
    $('#loading').stop().hide('slow');
    $('#currentswitch').hide(1500);
    $('#dayswitch').show();
}

Also note that just setting the src attribute doesn’t wait until the image is actually loaded. For that you can put a hook in with the load function:

 $('#activecam').attr('src', 'http://weeg.binaer.no/weeg_com/nesjordet.jpg?time='+Date())
                .load(function()
                {
                  $('#loading').stop().hide('slow');
                  $('#currentswitch').hide(1500);
                  $('#dayswitch').show();    
                });