Блог

Я использую 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();
    }
}
  

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

Читая между строк, я думаю, что вы хотите сказать следующее:

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

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

http://jsfiddle.net/WGxmy/

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

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

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

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