So verhindern Sie, dass dasselbe Ereignis wiederholt ausgelöst wird

Dieses Mal werde ich Ihnen vorstellen, wie Sie verhindern können, dass dasselbe Ereignis wiederholt ausgelöst wird, und welche Vorsichtsmaßnahmen es gibt, um zu verhindern, dass dasselbe Ereignis wiederholt ausgelöst wird ist ein praktischer Fall, schauen wir uns das einmal an.

Wiederholtes Auslösen soll verhindern, dass Benutzer wiederholt klicken, um Daten zu übermitteln. Wenn nach dem Klicken keine Antwort erfolgt, ist dies nicht nur aus Sicht der Benutzererfahrung erforderlich, 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 Leute tun dies, aber in anderen Situationen ist es nicht sehr effektiv.

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 das Ereignis innerhalb von 300 Millisekunden erneut auftritt, wird der vorherige Klick abgebrochen und der Timer neu eingestellt. Dies wird wiederholt, bis 300 Millisekunden vollständig abgewartet wurden, bevor auf das Ereignis reagiert wird.

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 Attribut, das deaktiviert werden kann, um zu steuern, ob darauf geklickt werden kann. Siehe den Code

<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>

Ich glaube, Sie haben die Methode nach dem Lesen gemeistert Bitte achten Sie auf weitere spannende Artikel auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So erzielen Sie einen Bildkarusselleffekt

Die jQuery-Methode zum Implementieren eines zeitgesteuerten Ausblenddialogfelds

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