addEventListener и removeEventListener

Question

На сайте, в шапке две кнопки, допустим 1 и 2. При нажатии кнопки 2 на странице начинается цикличное обновление, вот код:

// Получим наш элемент
  var li = document.getElementsByTagName('li')[1];

  // Событие, которое происходит при клике на элемент
  li.addEventListener('click', function once(){
      setInterval(function once(){
    li.click();
  }, 5000);
  });

Требуется при нажатии на кнопку 1 остановить обновление, а если снова нажата клавиша 2 его продолжить и по кругу.

Пробовал стопить вот так:

var li = document.getElementsByTagName('li')[0];
// Событие, которое происходит при клике на параграф

function once() {
    li.removeEventListener("click", once);
  }
  li.addEventListener("click", once);

Не работает, помогите все сделать правильно!

Answer 1

Элементы

var li = document.getElementsByTagName('li')[1];

и

var li = document.getElementsByTagName('li')[0];

разные элементы.

var li_0 = document.getElementsByTagName('li')[0];
var li_1 = document.getElementsByTagName('li')[1];
var timer;
var counter = 0;

li_1.addEventListener('click', function() {
  if (!timer) {
    console.log("starting");
    timer = setInterval(function() {
      // some useful code
      console.clear();
      console.log(++counter);
    }, 1000);
  }
});

li_0.addEventListener('click', function() {
  console.log("stopping");
  timer = clearInterval(timer);
});

<ul>
  <li>Click to Stop</li>
  <li>Click to Start</li>
</ul>

Answer 2

var li_0 = document.getElementsByTagName('li')[0];
var li_1 = document.getElementsByTagName('li')[1];
var timer;

li_1.addEventListener('click', function(){
  if (!timer) {
    timer = setInterval(function() {
        li_1.click();
    }, 5000);
  }
});

li_0.addEventListener('click', function() {
  timer = clearInterval(timer);
});

Вот так выглядит решение сего вопроса, благодарю за помощь!

Answer 3

В продолжении темы собрал еще один скрипт:

var li_1 = document.getElementsByTagName('li')[1];
var li_2 = document.getElementsByClassName('btn grey order')[3];
var timer;

li_1.addEventListener('click', function(){
  if (!timer) {
    timer = setInterval(function() {
        li_1.click();
    }, 10000);
  }
});

li_2.addEventListener('click', function() {
  timer = clearInterval(timer);
});

который запускает таймер по клику на одну кнопку li_1 и должен остановить его на li_2, но остановка не происходит. Что не так и что ему надо?

БЛОГ НА HUSL

addEventListener и removeEventListener

Ответы (3 шт):