Question

I’m using JS to animate two images by having them toggle on and off. I have an initial image which, when the animation is turned on, appears on the screen and stays on. The second image, which has a higher z value, is then set to toggle on and off every 1 second in the same location as the first image, so it appears as if the two are alternating.

I’m using window.setInterval to make the second image blink, but when I need to turn the animation off (and I’m removing both images from the screen), my window.clearInterval is not “working” The first image will be gone, but the second one keeps blinking on and off every second.

Code:

function notebookNotification(setting)
{
    $("#lightNotificationContainer").show();
    var notificationAnimation = window.setInterval('$("#darkNotificationContainer").toggle()', 1000);
    if(setting == 0)
    {
        window.clearInterval(notificationAnimation);
        $("#lightNotificationContainer").hide();
        $("#darkNotificationContainer").hide();
    }
}

Anyone see why it isn’t working?

Answer 1

Reading between the lines, I think what you’re saying is this:

1. You execute notebookNotification(1); and the animation starts
2. You execute notebookNotification(0); and the animation does not stop.

My guess is that you want notebookNotification(0) to disable the flashing.

In order to do that, you need to rework this function considerably. You need to store the intervalID that comes from setInterval in a variable that survives outside of the scope of this function and can be used for clearInterval on subsequent calls to this function.

For example:

var intervalID;
function notebookNotification(setting)
{
    if(setting == 0)
    {
        if(intervalID) {
            window.clearInterval(intervalID);
            intervalID = null;
        }
        $("#lightNotificationContainer").hide();
        $("#darkNotificationContainer").hide();
    }
    else
    {
        $("#lightNotificationContainer").show();
        if(!intervalID) {
            intervalID = window.setInterval('$("#darkNotificationContainer").toggle()', 1000);
        }
    }
}