Wie jQuery verhindert, dass dasselbe Ereignis wiederholt und schnell ausgelöst wird

Jetzt werde ich Ihnen eine jQuery-Methode vorstellen, um zu verhindern, dass dasselbe Ereignis schnell und wiederholt ausgelöst wird. Es hat einen sehr guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Wiederholtes Auslösen soll verhindern, dass Benutzer wiederholt klicken, um Daten zu übermitteln. Wenn nach dem Klicken keine Antwort erfolgt, muss dies nicht nur aus Sicht des Benutzers erfolgen, sondern auch Dies kann in JS- oder PHP-Programmskripten erfolgen. Lassen Sie den Benutzer wissen, dass der Klick gesendet wurde und der Server ihn verarbeitet. Jetzt werde ich das Skript bearbeiten, um dieses wiederholte Auslöseproblem zu beheben.

Oft werden Ereignisse wiederholt und schnell ausgelöst, wie z. B. ein Klick, der den Code zweimal ausführt, was viele Konsequenzen nach sich zieht. Mittlerweile gibt es viele Lösungen, aber fast alle haben Einschränkungen. Wenn Sie beispielsweise in einem Ajax-Formular verhindern, dass Benutzer mehrere Male gleichzeitig klicken, können Sie die Schaltfläche „Senden“ einfrieren, wenn sie zum ersten Mal darauf klicken, und sie dann wieder freigeben erneutes Klicken ist erlaubt. Viele Menschen tun dies, aber in anderen Situationen funktioniert es nicht sehr gut.

Das Folgende ist eine gute empfohlene Methode. Werfen Sie zunächst eine Funktion hinein.

var _timer = {}; 
function delay_till_last(id, fn, wait) { 
 if (_timer[id]) { 
  window.clearTimeout(_timer[id]); 
  delete _timer[id]; 
 } 
 
 return _timer[id] = window.setTimeout(function() { 
  fn(); 
  delete _timer[id]; 
 }, wait); 
}

Verwendung

$dom.on('click', function() { 
 delay_till_last('id', function() {//注意 id 是唯一的 
  //响应事件 
 }, 300); 
});

Der obige Code kann 300 Millisekunden nach dem Klicken warten, wenn er innerhalb von 300 liegt Millisekunden Wenn dieses Ereignis erneut auftritt, wird der letzte Klick abgebrochen und der Timer wird neu gestartet. Wiederholen Sie diesen Vorgang, bis er 300 Millisekunden gewartet hat, bevor er auf das Ereignis reagiert.

Diese Funktion ist sehr nützlich, z. B. um Eingaben zu überprüfen oder den Avatar in Echtzeit basierend auf der eingegebenen E-Mail-Adresse abzurufen, ohne warten zu müssen, bis er unscharf ist, bevor man ihn abruft.

Beispiel

Button BUTTON-Klasse

eine Label-Klasse

Für die erste Art von Situation verfügt die Schaltfläche über ein deaktiviertes Attribut, um zu steuern, ob sie angeklickt werden kann.

<input type="button" value="Click" id="subBtn"/> 
<script type="text/javascript"> 
function myFunc(){ 
 //code 
 //执行某段代码后可选择移除disabled属性，让button可以再次被点击 
 $("#subBtn").removeAttr("disabled"); 
} 
$("#subBtn").click(function(){ 
 //让button无法再次点击 
 $(this).attr("disabled","disabled"); 
 //执行其它代码，比如提交事件等 
 myFunc(); 
}); 
</script>

Das Obige ist das, was ich für alle zusammengestellt habe wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

Verwendung von vue2.0.js zur Implementierung von mehrstufigen Verknüpfungsselektoren

Verwendung von mint-ui zur Implementierung von Provinzen und Städte Verknüpfungseffekt der dritten Ebene

Verwenden Sie Vue, um die Routing-Einstellungsmethode der zweiten Ebene zu implementieren

Das obige ist der detaillierte Inhalt vonWie jQuery verhindert, dass dasselbe Ereignis wiederholt und schnell ausgelöst wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!