javascript - 我如何 'reset' 调用方法？

Question

大家好，

我目前在 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();

亲切的问候

Answer 1

为了更好的结构，我会嵌套超时，然后存储超时的 id 并清除它:

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();