Блог

Добрый день всем,

В настоящее время я столкнулся с проблемой здесь, на javascript.

У меня есть автоматический цикл слайд-шоу, основанный на этом http://jsfiddle.net/pdb4kb1a/2 .

Теперь у меня также есть стрелки, добавленные к изображениям, поэтому пользователь также должен иметь возможность перемещаться туда и обратно. Проблема здесь в том, что когда я вызываю onClick(), он продолжает повторно вызывать метод slideShow (n) без «прерывания» или «сброса» другого. Итак, в итоге я получаю вызов в цикле, в то время как другой все еще выполняется, что создает очень быстрый и дезориентированный цикл после нажатия кнопок со стрелками.

Как мне сбросить цикл slideShow() при вызове?

 var imgArray = ['img/sleutels.jpg', 'img/naamborden.jpg', 'img/leer.jpg'];
var photoIndex = 2;                                                             
var photoId = document.getElementById('photoSlide');



function setIndex(n) {                          
    slideShow((photoIndex   n));                            
}


function slideShow(n) {
    photoId.className  = "fadeOut";                                             
    setTimeout(appear, 500);                                                    
    photoIndex  ;
    if (photoIndex == imgArray.length) {                                        
        photoIndex = 0; 
    }
    console.log(photoIndex);
   setTimeout(slideShow, 5000);                                                 
}


function appear() { 
    photoId.src = imgArray[photoIndex];     
    photoId.className = "";                     
}


slideShow();
  

С уважением

Для лучшей структуры я бы вложил таймауты, затем сохранил идентификатор таймаута и очистил его:

 var appearId, showId;

function setIndex(n) {
    slideShow((photoIndex   n));
}

function slideShow(n) {
    photoId.className  = "fadeOut";
    photoIndex  ;

    if (photoIndex == imgArray.length) {
        photoIndex = 0;
    }
    console.log(photoIndex);

    if (appearId) { clearTimeout(appearId) }
    appearId = setTimeout(appear, 500);
}

function appear() {
    photoId.src = imgArray[photoIndex];
    photoId.className = "";

    if (showId) { clearTimeout(showId) }
    showId = setTimeout(slideShow, 4500);
}

slideShow();
  

Вы пытались сохранить время ожидания слайд-шоу в переменной и сбросить его в onclick? Что-то вроде этого :

 var imgArray = [
    'http://placehold.it/300x200',
    'http://placehold.it/200x100',
    'http://placehold.it/400x300'],
    curIndex = 0;
    imgDuration = 3000;

var slideTimeout;

document.getElementById('nextButton').addEventListener('click', onNextClick);

function slideShow() {
    document.getElementById('slider').className  = "fadeOut";
    setTimeout(function() {
        document.getElementById('slider').src = imgArray[curIndex];
        document.getElementById('slider').className = "";
    },1000);
    nextIndex();
    slideTimeout = setTimeout(slideShow, imgDuration);
}
slideShow();

function onNextClick(domEvent){
  if (slideTimeout)
    clearTimeout(slideTimeout);
  
  nextIndex();
  slideShow();
}

function nextIndex(){
  curIndex  ;
    if (curIndex == imgArray.length) { curIndex = 0; }
}  

 #nextButton{
  background-color: #aaa;
  padding:4px 12px;
  margin-bottom: 20px;
}

#slider {
    opacity:1;
    transition: opacity 1s; 
    display: block;
}

#slider.fadeOut {
    opacity:0;
}  

 <span id="nextButton">NEXT</span>
<img id="slider" src="http://placehold.it/50x200">  

Все еще нужно изменить некоторый код, потому что мне не очень нравится, как вы обрабатываете индекс, но он работает… Вам просто нужно улучшить этот код для обработки «предыдущего» изображения, и вы получите то, что хотите 😉 Надеюсь, это поможет