Как поправить setInterval в javascript?

Question

[Сергей Бурдужа]

Есть такая задача, при наведении на ссылку, нужно чтобы плавно менялись элементы внутри. Первый я скрыл при помощи css.

ul.small-menu
    li
        a(href="#")
            .small-menu__item
                img(src="assets/i/small-menu/Prodotti.jpg" alt="")
                h2 Prodotti
            .small-menu__item
                img(src="assets/i/small-menu/Prodotti.jpg" alt="")
                h2 Prodotti
            .small-menu__item
                img(src="assets/i/small-menu/Prodotti.jpg" alt="")
                h2 Prodotti
    li
        a(href="#")
            .small-menu__item
                img(src="assets/i/Ricette.jpg" alt="")
                h2 Ricette
    li
        a(href="#")
            img(src="assets/i/Specialita.jpg" alt="")
            h2 Guida alla bistecca perfetta

Я задал setInterval, но он у меня не меняется на 'counter finish', когда счетчик равен количеству элементов в блоке.

let changeSmallMenuItem = function () {
    let counter = 1;
    const elemLength = $('.small-menu__item').length - 1;

    if (counter === elemLength.length) {
      console.log('counter finish');
    } else {
      let counterInerval = setInterval(() => {
        if (counter === elemLength.length) {
          console.log('counter finish');
        } else {
          console.log(counter++);
        }
      }, 1000);
    }
  };

  $('.small-menu a').hover(function () {
    changeSmallMenuItem();
  }, function () {
    clearInterval(countInterval);
  });

По-моему я перемудрил с setInterval.

За ранее благодарен за подсказку.

Придется подтянуть js.

Comments

[Ярослав Иванов]

let counterInerval
let changeSmallMenuItem = function () {
    let counter = 1;
    const elemLength = $('.small-menu__item').length - 1;

    if (counter === elemLength.length) {
      console.log('counter finish');
    } else {
      counterInerval = setInterval(() => {
        if (counter === elemLength.length) {
          console.log('counter finish');
        } else {
          console.log(counter++);
        }
      }, 1000);
    }
  };

  $('.small-menu a').hover(function () {
    changeSmallMenuItem();
  }, function () {
    clearInterval(countInterval);
  });

[Сергей Бурдужа]

Ярослав Иванов, Спасибо за ответ, я немного поработал над кодом, и вот, что у меня получилось.

let changeSmallMenuItem = function (counter) {
    const elemLength = $('.small-menu__item').length - 1;

    let counterInerval = setInterval(() => {
      if (counter === elemLength) {
        clearInterval(counterInerval);
      } else {
        console.log(counter++);
      }
    }, 1000);
  };

  $('.small-menu a').hover(function () {
    changeSmallMenuItem(counter);
  }, function () {
    counter = 2;
  });

Осталось решить только последнюю задачу.

Я навожу на блок, картинки меняются, потом, когда counter равен числу картинок, я делаю clearInterval, и хочу запустить новый interval. Только нужно сбросить счетчик.

Только как запустить новый интервал и потом его сбросить.

Это получается рекурсия?