Comment éviter que le même événement ne soit déclenché à plusieurs reprises

Cette fois, je vais vous présenter comment éviter que le même événement ne se déclenche à plusieurs reprises, et quelles sont les précautions pour éviter que le même événement ne se déclenche à plusieurs reprises. est un cas pratique, jetons-y un coup d'oeil une fois.

Le déclenchement répété vise à empêcher les utilisateurs de cliquer à plusieurs reprises pour soumettre des données. Nous cliquons généralement à nouveau s'il n'y a pas de réponse après avoir cliqué. Cela doit non seulement être fait du point de vue de l'expérience utilisateur, mais également. être effectué dans les scripts du programme js ou php. D'accord, faites savoir à l'utilisateur que le clic est soumis et que le serveur le traite. Je vais maintenant trier le script pour traiter ce problème de déclenchement répété.

Souvent, des événements seront déclenchés de manière répétée et rapide, comme un clic, qui exécutera le code deux fois, entraînant de nombreuses conséquences. Il existe désormais de nombreuses solutions, mais presque toutes ont des limites. Par exemple, dans un formulaire Ajax, si l'utilisateur ne peut pas cliquer plusieurs fois à la fois, le bouton de soumission peut être gelé lorsque l'utilisateur clique dessus pour la première fois, puis ensuite. libéré lorsqu'un autre clic est autorisé. Beaucoup de gens le font, mais ce n'est pas très efficace dans d'autres situations.

Ce qui suit est une bonne méthode recommandée. Tout d'abord, lancez-y une fonction.

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

Utilisation

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

Le code ci-dessus peut attendre 300 millisecondes après avoir cliqué sur Si Si ceci. L'événement se reproduit dans les 300 millisecondes, le clic précédent sera annulé et la minuterie sera resynchronisée jusqu'à ce que 300 millisecondes aient été complètement attendues avant de répondre à l'événement.

Cette fonction est très utile, comme vérifier une saisie ou extraire l'avatar en temps réel en fonction de l'adresse e-mail saisie sans avoir à attendre qu'elle soit floue avant de l'extraire.

Exemple

Classe Button BUTTON

une classe Label

Pour le premier type de situation, le bouton a un attribut qui est désactivé pour contrôler s'il peut être cliqué. Voir le 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>

Je pense que vous maîtrisez la méthode après avoir lu le. cas dans cet article. Veuillez prêter attention aux choses plus intéressantes. Autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment obtenir un effet carrousel d'images

La méthode jQuery pour implémenter une boîte de dialogue de masquage chronométré

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!