Verhindern, dass Code mehrmals in Aktion ausgeführt wird

Question

Ich habe Code in Aktion, der gut funktioniert, wenn die Person nur einmal auf die Schaltfläche klickt, aber wenn sie mehrere Male schnell auf die Schaltfläche klicken, wird dieser Code viele Male ausgeführt und seltsam erstellt Probleme. Kann jemand das verhindern?

Answer 1

Fügen Sie diese zu Ihrer Schaltfläche hinzu.

onclick="this.disabled=true;" 

Beispiel:

<button onclick="this.disabled=true;">Click</button> 

Wenn Sie auf die Schaltfläche klicken, wird das Onclick läuft sofort und deaktiviert die Schaltfläche, um zusätzliche Klicks zu verhindern.

Answer 2

Sie möchten das Attribut disabled Ihres <button>/so einstellen, dass Benutzer es nicht erneut auslösen, während Sie die erste Aktion ausführen. Um dies zu tun, verwende ich normalerweise ein Flag, um festzustellen, ob diese Aktion gerade verarbeitet wird. Wenn das Flag gesetzt ist, setzen Sie das Attribut disabled. Es ist auch eine gute Idee, eine Wächter-Anweisung in Ihrer Aktion zu haben. Da manche Browser das disabled Attribut nicht respektieren.

Controller/Komponente:

import Ember from 'ember'; 
import moment from 'moment'; 

export default Ember.Controller.extend({ 
    isLoading: false, 
    actions: { 
     yourAction() { 
      // It's a good idea to use a guard statement here as well. Just incase the browser doesn't respect the `disabled` attribute. 
      if(this.get('isLoading')) { 
       return; 
      } 
      this.set('isLoading', true); 
      // Do your work here. If it's a promise, use `finally` to unset the flag to avoid forever loading on errors. 
      this.set('isLoading', false); 
     } 
    } 
} 

Vorlage:

<button {{action 'yourAction'}} 
     disabled={{isLoading}}> 
    Your Action 
</button> 

Mit dieser Methode können Sie auch auch einige Laden Styling auf Aktion hinzufügen. Vielleicht ein Spinner als Pseudo-Element:

Vorlage:

<button class="{{if isLoading 'loading'}}" 
     {{action 'yourAction'}} 
     disabled={{isLoading}}> 
    Your Action 
</button> 

bearbeiten
Als ykaragol mentioned, wenn Sie wollen/können eine Bibliothek zu Ihrer Ember App hinzufügen, wird ember-concurrency stark das native Beispiel Ember vereinfachen über. Sie haben eine Anleitung here, die das obige Beispiel in ein besser lesbares Beispiel mit ember-concurrency umgestaltet.

Answer 3

Die erste Lösung ist Deaktivieren der Schaltfläche nach dem Klicken durch Festlegen der disabled Eigenschaft der Schaltfläche.

Obwohl Einstellung disabled Eigenschaft der Schaltfläche kann die Lösung vollständig lösen; Die wieder zu aktivieren Logik in den Code ist nicht nett, wenn einige asynchrone Operation ausgeführt wird.

Darüber hinaus kann die erneute Aktivierung der Schaltfläche komplexer sein, wenn Sie andere Bedingungen zum Deaktivieren der Schaltfläche haben. (Wenn z. B. ein Feld auf dem Formular einen ungültigen Wert hat, können Sie die Schaltfläche wieder deaktivieren.)

Wir bevorzugen meistens ember-concurrency Addon für solche Bedürfnisse. Seine Struktur task bietet in den meisten Fällen einen besser lesbaren Code.