時限関数とユーザー起動関数の競合

Question

私はこのビットを使って、私が最初から書いたjavascriptを使いこなしていましたが、最近遭遇した小さな問題を除いて、かなりうまく動作します。このコードの目的は、自動的に（5秒ごとに）写真を繰り返し表示する簡単なスライドショーを作成することです。

この問題は、ユーザーがリンクをクリックしてシリーズ内の写真を選択できるようにする機能を追加したときに発生しました。ユーザーが写真をクリックし続けると、5秒の時間が大幅に減少し、原因を突き止めることができません。

コードを再作成してテストするために必要なすべてのコードをJSFiddleにコピーしました。誰かが気にして建設的な批判をしてくれれば幸いです。

http://jsfiddle.net/h8Act/1/

Answer 1

たびに、ユーザは、したがって、実際には、あなたの関数の複数のインスタンスがある場合、回転の間の時間が短縮しているようなので、それが見える別のsetTimeoutを開始、彼らはsireTimer()の別の「ラウンド」を起動し、これらのリンクをクリックしてください回転機能を発射する。 addicional setTimeoutの

Answer 2

を開始避けるためにフラグを追加

てみてください、私は、単一のVARでタイムアウトを覚えていないと思いますが、配列

durations = []; 

/* ... */ 

// in sireTimer 
    // cancel all timeouts 
for (var i=0; i< durations.length; i++) { 
    clearTimeout(durations[i]) 
} 
    // clear timeout array 
durations = []; 
durations.push(setTimeout ...) 

にウィンドウやタブをchanngingた可能性がありいくつかのタイムアウトを開始してください。だからすべてのタイムアウトをクリアする