Comment utiliser Throttle avec Css au lieu de Javascript

Comme nous le savons tous, la manette des fonctions est une méthode d'optimisation très courante dans JS, qui peut efficacement éviter l'exécution trop fréquente de fonctions. En fait, en plus de la méthode JS, CSS peut également implémenter une telle fonction très facilement sans aucune bibliothèque de framework. , nous allons jeter un coup d'oeil.

Par exemple : un bouton de sauvegarde, afin d'éviter les soumissions répétées ou les problèmes de serveur, nécessite souvent certaines restrictions sur le comportement des clics, comme n'autoriser qu'une seule soumission toutes les 300 ms. À l'heure actuelle, je pense que la plupart des étudiants copieront directement une fonction d'accélérateur sur Internet. Ou référencez directement la bibliothèque d'outils lodash

btn.addEventListener('click', _.throttle(save, 300))

Ici, vous devez restreindre l'événement de clic, c'est-à-dire désactiver l'événement de clic. Réfléchissez à la façon de désactiver l'événement. Oui, ce sont des événements de pointeur ;
Ensuite, il y a le délai. Après chaque clic, il doit être automatiquement désactivé pendant 300 ms, et il sera restauré une fois le temps écoulé. Alors, quelles fonctionnalités sont liées au temps et à la restauration de l'état ? C'est vrai, c'est de l' animation ;
De plus, il faut qu'il y ait un temps de déclenchement, voici le comportement du clic, donc il doit être lié à la pseudo-classe : active .
Par conséquent, une analyse complète montre que pointer-events , animation et :activesont nécessaires pour réaliser une telle fonction, alors comment connecter ces idées en série ?

Avez-vous pensé à cela?

En fait, ce genre de scène peut être compris comme le contrôle de l'animation CSS. Par exemple, il y a un bouton de contrôle d'animation qui passe de désactivé -> cliquable, et l'animation est ré-exécutée à chaque clic. Pendant le processus d'exécution, il est toujours désactivé. A-t-il obtenu l'effet de "limitation" ?

Supposons qu'il y ait un bouton, lié à un événement click

<button onclick="console.log('save')">save</button>

@keyframes throttle {
  from {
    pointer-events: none;
  }
  to {
    pointer-events: all;
  }
}

Ensuite, liez cette animation au bouton

button{
  animation: throttle 0.3s step-end forwards;
}

Comme indiqué ci-dessous, la valeur des événements de pointeur est nulle dans les 0 à 0,3 secondes. Une fois qu'il atteint 0,3 seconde, il devient immédiatement tout. Puisqu'il est en avant, il maintiendra toujours l'état de tous.

Enfin, réexécutez l'animation en cliquant, réglez simplement l'animation sur aucune en appuyant.

button:active{
  animation: none;
}
button{
  animation: throttle 2s step-end forwards;
}
button:active{
  animation: none;
}
@keyframes throttle {
  from {
    pointer-events: none;
  }
  to {
    pointer-events: all;
  }
}

L'idée spécifique est celle-ci, à travers : active pour déclencher le changement de transition, puis définir dynamiquement l'état désactivé du bouton en écoutant le rappel de transition, comme suit :

button{
  opacity: .99;
  transition: opacity 2s;
}
button:not(:disabled):active{
  opacity: 1;
  transition: 0s;
}

// start
document.addEventListener('transitionstart', function(ev){
  ev.target.disabled = true
})
// end
document.addEventListener('transitionend', function(ev){
  ev.target.disabled = false
})

Cependant, cette méthode de mise en œuvre est encore relativement limitée, limitée aux comportements de clic. Dans de nombreux cas, la limitation peut être utilisée pour faire défiler des événements ou des événements de clavier. De tels scénarios peuvent être mis en œuvre de manière traditionnelle.