Wie Sie verhindern, dass der Aufruf von de-Ereignisprozedur zweimal auf schnelle Klicks?

Gibt es einen Knopf und wenn der Benutzer klickt auf den button, werden einige Daten gespeichert mit back-end. Problem ist, wenn der Benutzer klickt auf den button sehr schnell, event-handler wird immer ausgeführt, mehrere Male.

Dies ist der code

var x = 1;
$('#button').click(function() {
  //Do something
  //Save some data on network
  x++;
  console.log(x);
});

Ich möchte dieser Prozedur, die ausgeführt werden, wenn der Benutzer klickt auf die Schaltfläche nur einmal. Auch Bei doppelt oder dreifach klicken, dies sollte nur einmal ausgeführt. Ich möchte nur vermeiden, Klicks, diese Prozedur kann ausgeführt werden, wieder natürlich

Habe ich mehrere Lösungen im Kopf wie

Definieren Sie eine Globale variable wie IS_BUTTON_HANDLER_WORKING = false und wenn Sie den hf setzen Sie ihn auf true und am Ende auf false gesetzt wieder. Und prüfen Sie, ob es wahr ist, einfach aus der Funktion zurückzugeben.
Trennen der hf am Anfang und wieder am Ende.

Betrachten Sie 25 Tasten in der Anwendung. Was sollte der beste Ansatz, um dies zu implementieren.

Werfen Sie einen Blick auf diese Fiddle

Lösung

$('#button').click(function() {
   $(this).attr('disabled', true);
  //Do something
  //Save some data on network
  $(this).removeAttr('disabled');
});

Mit dieser, wir sind sicher, dass unsere nächsten handler wird ausgeführt, nur bei der vorherigen Ausführung wurde völlig geschafft.

Versuchen Sie es mit one('click', fn) statt click
Ich glaube nicht, dass one ist die richtige Antwort, weil der handler nicht ausgeführt werden, wieder. Möchten Sie vielleicht zum senden des Formulars mit aktualisierten Daten wieder nach einiger Zeit.

InformationsquelleAutor sachinjain024 | 2013-11-29

David Walsh hat einen großen Lösung.

//Returns a function, that, as long as it continues to be invoked, will not
//be triggered. The function will be called after it stops being called for
//N milliseconds. If `immediate` is passed, trigger the function on the
//leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

Ja, ich habe gelesen, dass die post viel später, nachdem ich dies gepostet. Ich bin verändert, die akzeptierten Antworten, da dies ist der richtige Ansatz. Vielen Dank, dass Sie es hier!!

InformationsquelleAutor Dorad

11

Gibt es mehrere Möglichkeiten, damit umzugehen:

Können Sie disable/hide den button nach dem Klick:
```
$('#button').attr("disabled", true);
```
Können Sie auch ein Zeitlimit auf jeder klicken Sie, um sicherzustellen, dass es nicht erneut ausführen:
```
var x, y = 1;

$('#button').click(function() {
  if (x) clearTimeout(x);
  x = setTimeout(function() {
     //do the work here
     y++;
     console.log(y);
     //----------------
  }, 1000);
});
```
Also jedes mal, wenn die Schaltfläche geklickt wird, wird es eigentlich nur den code auszuführen, nachdem ein 1000 milliseconds wenn die Schaltfläche geklickt wird, in der raschen Folge, das timeout wird einfach gelöscht und wieder von vorne anfangen.

_{beachten Sie, dass die oben ist ungetestet}

Ich persönlich denke, die Behinderten-Lösung ist die beste, weil es zeigt dem Benutzer an, dass er geklickt hat und etwas passiert ist, Sie kann sogar zeigen ein loader neben der Taste als auch.
- Wie ich diese deaktivieren Taste Ansatz, da Es nicht von mir verlangen, zu wissen zusätzliche Informationen. Any global variable oder setinterval -> Macht den code etwas komplexer.
- Dies wird nicht deaktivieren Sie die Schaltfläche, wenn darauf geklickt wird programmgesteuert.
InformationsquelleAutor epoch

Als pro Bearbeiten

Sollten Sie verwenden .ein()

oder

Können Sie unbind Ereignis on click Funktion

var x = 1;
function myButtonClick() {

    $('#button').unbind('click');

    //Do something
    //Save some data on network
    x++;
    console.log(x);
    $('#button').bind('click', myButtonClick);
}

$('#button').bind('click', myButtonClick);

InformationsquelleAutor Satpal

1

Können Sie Gebrauch machen von jQuery ein() Methode, wie dargestellt hier

InformationsquelleAutor Vinayak Sakhare

Ich bin mit der einfachen Lösung unten, und es funktioniert für mich gut :

var x = 1;
e.handled=false;
$('#button').click(function(e) {
  if(e.handled==false){
      e.handled=true;
      //Do something
      //Save some data on network
      x++;
      console.log(x);      
  }
});

InformationsquelleAutor Roy M J

Du suchst diese

$( "button" ).one( "click", function(evt) {
  x++;
  console.log(x);
});

Oder, wenn u brauchen ein gewisses Zeitintervall zu verfallen zwischen zwei effektive Klicks.

var last, diff;
$( "button" ).click(function( event ) {
  if (last){
    diff = event.timeStamp - last;
    if (diff >= SOMEVAL){
      x++;
      console.log(x);    
    }
  }
  last = event.timeStamp;          
});

InformationsquelleAutor Ishank

JS:

var btn = document.querySelector('#twofuns');
btn.addEventListener('click',method1);
btn.addEventListener('click',method2);
function method2(){
  console.log("Method 2");
}
setTimeout(function(){
  btn.removeEventListener('click',method1);
},5000);
function method1(){
  console.log("Method 1");
}

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Pramod Kharade-RemoveEventListener after Interval</title>
</head>
<body>
<button id="twofuns">Click Me!</button>
</body>
</html>

Können Sie entfernen Sie einen listener bei mehreren in java-script wie oben.

InformationsquelleAutor Pramod Kharade

Versuchen Sie den folgenden code

var x = 1;
var fewSeconds=10; /*10 seconds*/

$('#button').click(function() {
$('#button').attr("disabled", "disabled");
  x++;
  console.log(x);
    var btn = $(this);
    btn.prop('disabled', true);
    setTimeout(function(){
        btn.prop('disabled', false);
    }, fewSeconds*1000);

});

InformationsquelleAutor Zword

0

Vorausgesetzt, Sie befestigt und Ereignis-listener auf die Schaltfläche, ein Ansatz ist, um einfach entfernen Sie den Ereignis-listener vom button und befestigen Sie es später erneut, wenn nötig.

In der Ereignis-listener-Funktion selbst fügen Sie den folgenden code:
```
function handleButtonClick(e){
  e.target.removeEventListener("click", handleBackButton);
}
```
Je nach Ihrem setup, das funktionieren könnte.

InformationsquelleAutor Wigglepee

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.