Как поправить 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. Только нужно сбросить счетчик.

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

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

Answer 1

[Gennady S]

Так Вы, похоже, не делаете clearInterval(countInterval); когда выполняется условие по счетчику? И потом, если используете jQuery, анимировать можно и без таймера, навскидку:

const animate = ($elements, index) => {
  if (index < $elements.length)
    $elements.eq(index).animate({...}, {...}, () => animate($elements, index+1));
}
animate($(selector), 0);

— jQuery сам анимирует, а по завершению цикла анимации вызовет обработчик, куда передаем следующий шаг (который можно сформировать любым удобным образом, в данном случае некая условная анимация элементов по списку), а когда индекс выйдет за границы селектора — вызова не будет, выполнение завершится.

Comments

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

Спасибо за ответ.
А как потом еще раз анимировать картинки, когда будет отображаться последняя. Чтобы это происходила по-кругу?

[Gennady S]

Сергей Бурдужа, как вариант, создать функцию animateBack, и при условии if (index < $elements.length) ... else — вызвать ее. А там идти в обратную сторону, index - 1, if (index >= 0)

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

Gennady S, Спасибо