通話中にメソッドをリセットするにはどうすればよいですか？

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

を役に立てば幸い：

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

Answer 2

について、あなたは変数にスライドショーのタイムアウトを保存し、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">

私はあなただけにこのコードを強化するために持っている...本当にあなたがインデックスを扱うが、それが動作する方法好きではないので、変更するには、いくつかのコードがまだあります「前」の画像を処理し、あなたが望むものを持っているでしょう;）それはタイムアウトのIDを格納し、それをクリアした後、私は巣タイムアウトをだろう、より良い構造について