Cómo usar Throttle con Css en lugar de Javascript

Como todos sabemos, el acelerador de funciones es un método de optimización muy común en JS, que puede evitar efectivamente la ejecución de funciones con demasiada frecuencia. De hecho, además del método JS, CSS también puede implementar dicha función muy fácilmente sin ninguna biblioteca de marco. , vamos a ver.

Por ejemplo: un botón Guardar, para evitar envíos repetidos o consideraciones del servidor, a menudo requiere ciertas restricciones en el comportamiento del clic, como permitir solo un envío cada 300 ms. En este momento, creo que la mayoría de los estudiantes copiarán directamente una función de aceleración en Internet. O haga referencia directamente a la biblioteca de herramientas de lodash

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

Aquí, debe restringir el evento de clic, es decir, deshabilitar el evento de clic. Piense en cómo deshabilitar el evento. Sí, son eventos de puntero ;
Luego está el límite de tiempo. Después de cada clic, debe desactivarse automáticamente durante 300 ms y se restaurará una vez transcurrido el tiempo. Entonces, ¿qué características están relacionadas con el tiempo y la restauración del estado? Así es, es animación ;
Además, debe haber un tiempo de activación, aquí está el comportamiento del clic, por lo que debe estar relacionado con la pseudoclase : activa .
Por lo tanto, un análisis exhaustivo muestra que los eventos de puntero , la animación y : activese necesitan para realizar tal función, entonces, ¿cómo conectar estas ideas en serie?

Has pensado sobre eso?

De hecho, este tipo de escena puede entenderse como el control de la animación CSS. Por ejemplo, hay un botón de control de animación que cambia de deshabilitado -> se puede hacer clic, y la animación se vuelve a ejecutar cada vez que se hace clic. Durante el proceso de ejecución, siempre está deshabilitado. ¿Logró el efecto de "estrangulación"?

Supongamos que hay un botón, vinculado a un evento de clic

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

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

A continuación, vincula esta animación al botón.

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

Como se muestra a continuación, el valor de los eventos de puntero es ninguno en 0~0,3 segundos. Una vez que llega a 0,3 segundos, inmediatamente se convierte en todo. Como es hacia adelante, siempre mantendrá el estado de todos.

Finalmente, vuelva a ejecutar la animación al hacer clic, simplemente establezca la animación en ninguno al presionar.

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

La idea específica es esta, a través de: active para activar el cambio de transición, y luego establezca dinámicamente el estado deshabilitado del botón al escuchar la devolución de llamada de transición, de la siguiente manera:

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

Sin embargo, este método de implementación todavía es relativamente limitado, limitado a comportamientos de clic. En muchos casos, la limitación se puede usar para eventos de desplazamiento o eventos de teclado. Dichos escenarios se pueden implementar de manera tradicional.