Замена параметров в функции не работает

Question

Я делаю слайд-шоу изображений на JavaScript и, чтобы лучше понять код, я изменил параметр function slideshow(n) на function slideshow(slideIndex), но заметил, что он не работает, пожалуйста, помогите мне разобраться в чем разницамежду этими двумя параметрами функции и почему второй параметр в функции slideshow(slideIndex) не работает?

var slideIndex = 1;

slideshow(slideIndex);

function nextPrev(n){
    slideshow(slideIndex += n);
}

function slideshow(slideIndex){  

    // why "function slideshow(slideIndex)" stops executing after some 
    // slides, however function slideshow(n) works properly here?

    var x = document.getElementsByClassName("slide");
    var dot = document.getElementsByClassName("dot");
    if(slideIndex > x.length) slideIndex = 1;
    if(slideIndex < 1) slideIndex = x.length;
    for(var i=0; i < dot.length; i++){
        dot[i].className = dot[i].className.replace(" active", "");
    }
    for(var i = 0 ; i < x.length; i++){
        x[i].style.display = "none";
    }
    x[slideIndex-1].style.display = "block";
    dot[slideIndex-1].className += " active";
}

Answer 1

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

В результате, когда вы делаете:

if(slideIndex > x.length) slideIndex = 1;
if(slideIndex < 1) slideIndex = x.length;

, это влияет только на локальную переменную.переменная, а не глобальная переменная, поэтому эти изменения не сохраняются при возврате функции.

Если функция собирается обновить глобальную переменную, на самом деле нет веской причины для того, чтобы принимать индекс в качестве параметра,

function nextPrev(n) {
  slideIndex += n;
  slideshow();
}

function slideshow() {
  var x = document.getElementsByClassName("slide");
  var dot = document.getElementsByClassName("dot");
  if (slideIndex > x.length) {
    slideIndex = 1;
  } else if (slideIndex < 1) {
    slideIndex = x.length;
  }
  for (var i = 0; i < dot.length; i++) {
    dot[i].className = dot[i].className.replace(" active", "");
  }
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
  dot[slideIndex - 1].className += " active";
}

В качестве альтернативы, вы можете поместить код, который проверяет slideIndex на соответствие ограничениям массива в вызывающей программе, и slideshow() просто отображать слайд без обновления slideIndex.

* 1016.*

Кроме того, вместо вычитания 1 при использовании slideIndex в качестве индекса массива вы должны просто установить его значения в диапазоне от 0 до length-1 вместо 1 до length.Привыкайте к подсчету с 0 при работе с индексами массива.