Как вернуть переменную из функции?

Question

[Dymok]

codepen
Пытаюсь сделать слайдер с автоперелистыванием. Хочу реализовать это так, что есть переменная с текущим слайдом и функция(вызываемая setInterval), которая принимает эту переменную, меняет слайд на следующий и увеличивает переменную с номером слайда на 1. Суть вопроса в том, как вернуть эту переменную, чтобы использовать ее при следующем вызове функции setInterval'ом? Знаю про return, но не понимаю, как его применить тут
Или, может быть, я делаю всё в корне неправильно и есть способ проще? Я ничего не придумал( Заранее спасибо.

Answer 1

[Антон Спирин]

Правильнее будет вынести функции в прототип и использовать свойства экземпляра для состояния:

function Slider(props) {
  /* ...  */
  this.images = props.images;
  this.currentSlide = 1;
  /* ...  */
}

Slider.prototype.changeSlide = function() {
  /* ...  */
  if (this.currentSlide === this.images.length) {
    currentSlide = 1;
  } else {
    this.currentSlide++;
  }
  /* ...  */
}

Comments

[Dymok]

Спасибо за решение, но, честно говоря, никогда не пользовался прототипами и не знаю как правильно их применить. Вынес эту функцию в прототип, но теперь в консоли ошибка, что нету такой функции..

[Антон Спирин]

UnluckySerivelha, потому что вы все неправильно делаете) К функциям прототипа обращаются через ключевое слово this.:

function Slider(obj) {
    this.images = obj.images;
    this.autoplayInterval = obj.autoplayInterval;
    this.defaultSlide = obj.defaultSlide;
    this.autoplaySpeed = obj.autoplaySpeed;

    this.init();
}

Slider.prototype.init = function () {
  var currentSlide = this.defaultSlide || 1;
  var sliderContainer = $(".slider-container");

  for (var i = 0; i < this.images.length; i++) {
    var slideNumber = i + 1;
    var divElem = document.createElement("div");

    divElem.classList.add("slider-item");
    divElem.classList.add("slide-" + slideNumber);

    if (slideNumber == this.defaultSlide) {
      divElem.classList.add("slide-active");
    }

    divElem.style.backgroundImage = 'url(' + this.images[i] + ')';
    sliderContainer.append(divElem);
  }

  if (obj.autoplay) {
    setInterval(this.changeSlide.bind(this), this.autoplayInterval);
  }
}

Slider.prototype.changeSlide = function () {
    if (this.currentSlide === this.images.length) {
        currentSlide = 1;
    } else {
        this.currentSlide++;
    }
}