window.clearInterval не работает?

Question

Я использую JS для анимации двух изображений, включая и выключая их. У меня есть исходное изображение, которое при включении анимации появляется на экране и остается включенным. Второе изображение, которое имеет более высокое значение z, затем настраивается на включение и выключение каждую 1 секунду в том же месте, что и первое изображение, поэтому создается впечатление, что они чередуются.

Я использую window.setInterval, чтобы второе изображение мигало, но когда мне нужно отключить анимацию (и я удаляю оба изображения с экрана), мой window.clearInterval не «работает». Первое изображение исчезнет, ​​но второй мигает каждую секунду.

Код:

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

Кто-нибудь видит, почему это не работает?

Answer 1

Читая между строк, я думаю, что вы говорите так:

1. Вы выполняете notebookNotification(1); и анимация начинается
2. Вы выполняете notebookNotification(0);, и анимация не останавливается.

Полагаю, вы хотите, чтобы notebookNotification(0) отключил мигание.

Для этого вам необходимо значительно переработать эту функцию. Вам необходимо сохранить intervalID, получаемый из setInterval, в переменной, которая остается вне области действия этой функции и может использоваться для clearInterval при последующих вызовах этой функции.

Например:

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

Answer 2

Вот, попробуйте это:

http://jsfiddle.net/WGxmy/

Сохранение интервала в глобальной переменной, а не в функции, позволяет очистить его позже.

Answer 3

var keepflashing = true;
var isShowing = true;
function notebookNotification()
{
    if(!isShowing)
        $("#lightNotificationContainer").show();
    else
        $("#lightNotificationContainer").show();

    isShowing = !isShowing;

    if(keepflashing)
      setTimeout( function(){  notebookNotification(setting);  },100);
    else
    {
        $("#lightNotificationContainer").hide();
        $("#darkNotificationContainer").hide();
    }
}

Answer 4

Может быть, вы можете избежать вызова clearInterval () в общем?

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