Ich habe Probleme mit ClearTimeout() auf einem Zitatrotator

Question

Ich verwende this Codrops Blueprint, um einen Zitatsendreher zu erstellen. Ich änderte den Rotator eine nächste Taste haben, unten durch den Code angetrieben:

_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)); 
    }, 

ich die .click Funktion unterhalb der setTimeout-Funktion hinzugefügt, und hinzugefügt, um die var auf die setTimeout-Funktion.

Wenn .testimonial-next angeklickt wird, wird der Timer des Rotators zurückgesetzt und der Code im Timer wird sofort ausgeführt. Soweit ich das beurteilen kann, startet der Timer sich selbst neu, also sollte ich keinen Code hinzufügen müssen, um dies zu tun.

Auf the website where this is put to use (siehe Abschnitt "Testimonials") scheint jedoch ein Problem zu bestehen. Es sollte fünf Zitate geben, in der Reihenfolge Kim, Lynn, Shannon, Jennifer und Chris. Wenn der Timer ohne Unterbrechung läuft, funktioniert alles wie erwartet. Wenn Sie auf die Schaltfläche Weiter klicken, werden bestimmte Anführungszeichen übersprungen. In anderen Fällen hören die Kurse auf, sich zu drehen oder sich mit hoher Geschwindigkeit zu drehen.

Was mache ich falsch?

Answer 1

Ihr Button-Click-Handler wird immer wieder an die Schaltfläche angehängt, wodurch ein Klick zu mehreren Ausführungen desselben Codes führt.

Um dies zu lösen, können Sie den Code aus der _startRotator-Funktion entfernen und ihn irgendwo verschieben, wo er nur einmal ausgeführt wird.

Auf diese Weise wird nur ein Handler ausgeführt, wenn Sie auf klicken.

Weniger schön, aber auch eine Lösung wäre, den Code zu halten, wo es ist, aber immer entfernen Sie zunächst alle vorhandenen Click-Handler, bevor Sie es wieder anbringen:

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

Aber das ist wirklich eine hässliche Lösung. Versuchen Sie, den Code zu verschieben.