Как остановить setInterval из другой функции?

Question

[Андрей Федоров]

Есть такой код https://codepen.io/aliencash/pen/EryvRy

На странице есть куча блоков с бэкграундами, одному блоку соответствуют 4 бэкграунда. Нужно чтобы по наведению мыши на блок его бэкграунды начинали чередоваться с интервалом 1 секунда. А при mouse leave снова показывался первый бэкграунд.

Не могу понять как мне "отключить" setInterval.

ps: в js понимаю мало.

pps: еще такой артефакт обнаружил, если на один блок несколько раз "навести мышь-убрать мышь", по каждому наведению запустится свой setInterval. Само собой нужно чтобы он был только один.

Answer 1

[0xD34F]

document.addEventListener('mouseover', function(e) {
  if (e.target.classList.contains('pic')) {
    const interval = e.target.dataset.interval;
    if (!interval) {
      e.target.dataset.interval = bgRotate(e.target);
    }
  }
});

document.addEventListener('mouseout', function(e) {
  const interval = e.target.dataset.interval;
  if (interval) {
    clearInterval(interval);
    delete e.target.dataset.interval;
  }
});

или

document.querySelectorAll('.pic').forEach(n => {
  let interval = null;
  n.addEventListener('mouseover', () => {
    if (!interval) {
      interval = bgRotate(n);
    }
  });
  n.addEventListener('mouseout', () => {
     clearInterval(interval);
     interval = null;
  });
});

Comments

[Андрей Федоров]

Спасибо конечно. Работает почти так как надо. Еще бы понять что тут к чему...

[0xD34F]

Андрей Федоров,

Работает почти так как надо.

И?...

Еще бы понять что тут к чему...

Ну, разбирайтесь. Никто вам не мешает.

[Артур К.]

Андрей Федоров, это базовый уровень, скорее всего первый ответ в гугле на вопрос "js setInterval"

Суть в том, что функция setInterval возвращает идентификатор назначенного интервала. А позже, используя этот идентификатор, можно удалить интервал.

[Андрей Федоров]

Артур Э., это я нагуглил. Однако я не смог передать этот идентификатор в функцию прерывающую анимацию.

[Артур К.]

Андрей Федоров, потому что область видимости