引用符ローテータでclearTimeout（）に問題があります

Question

私はthis Codrops Blueprintを使用して引用符の回転子を作成しています。 Iは、setTimeout関数以下.click機能を追加し、setTimeout関数にVARを添加

_startRotator: function() { 

     if (this.support) { 
      this._startProgress(); 
     } 

     var timeout = setTimeout($.proxy(function() { 
      if (this.support) { 
       this._resetProgress(); 
      } 
      this._next(); 
      this._startRotator(); 
     }, this), this.options.interval); 

     $(".testimonial-next").click($.proxy(function() { 
      clearTimeout(timeout); 
          if (this.support) { 
       this._resetProgress(); 
      } 
      this._next(); 
      this._startRotator(); 

     }, this)); 
    }, 

：私は以下のコードによって電力供給、次のボタンを有するように回転子を改変しました。

.testimonial-nextをクリックすると、回転子のタイマーがリセットされ、タイマーのコードが即座に実行されます。私が知る限りでは、タイマー自体が再起動するので、これを行うためのコードを追加する必要はありません。

the website where this is put to use（ただし、「お客様の声」を参照）に問題があるようです。キム、リン、シャノン、ジェニファー、クリスの順に5つの引用符があるはずです。タイマーが中断されずに実行される場合、すべて正常に動作します。 [次へ]ボタンをクリックすると、特定の引用符がスキップされているように見えます。他の時は、引用符は回転を停止するか、高速でランダムに回転します。

私は間違っていますか？

Answer 1

ボタンクリックハンドラがボタンに何度も追加され、同じコードをいくつか実行するとクリック結果が表示されます。

これを解決するには、_startRotator関数からそのコードを移動し、一度しか実行されない場所に移動するのが最適です。

これをクリックすると、実行されるハンドラは1つだけになります。また

あまり素敵な、しかし、解決策、それはコードを維持することですが、あなたは再びそれを添付する前に、必ず最初に、既存のクリックハンドラを削除します。

$(".testimonial-next").off('click').on('click', $.proxy(function() { 
     // etc... 

をしかし、これは本当に醜いです溶液。コードを移動してみてください。