Comment jQuery empêche le même événement d'être déclenché à plusieurs reprises et rapidement

Maintenant, je vais partager avec vous une méthode jQuery pour empêcher le même événement de se déclencher rapidement et à plusieurs reprises. Il a une très bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

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 résoudre 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 vous empêchez les utilisateurs de cliquer plusieurs fois à la fois, vous pouvez geler le bouton d'envoi lorsqu'ils cliquent dessus pour la première fois, puis le relâcher une fois. cliquer à nouveau est autorisé. Beaucoup de gens le font, mais cela ne fonctionne pas très bien 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>

Ce qui précède est ce que j'ai compilé pour tout le monde. j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Utilisation de vue2.0.js pour implémenter des sélecteurs de liens multi-niveaux

Utilisation de mint-ui pour implémenter des provinces et les villes Effet de liaison de troisième niveau

Utilisez vue pour implémenter la méthode de configuration du routage de deuxième niveau

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!