Come usare Throttle con Css invece di Javascript

Come tutti sappiamo, il function throttle è un metodo di ottimizzazione molto comune in JS, che può efficacemente evitare l'esecuzione di funzioni troppo frequentemente. Infatti, oltre al metodo JS, anche i CSS possono implementare tale funzione molto facilmente senza alcuna libreria di framework , diamo un'occhiata.

Ad esempio: un pulsante di salvataggio, al fine di evitare invii ripetuti o considerazioni del server, richiede spesso alcune restrizioni sul comportamento dei clic, come consentire un solo invio ogni 300 ms. In questo momento, penso che la maggior parte degli studenti copierà direttamente una funzione di accelerazione su Internet. Oppure fai direttamente riferimento alla libreria di strumenti lodash

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

Qui è necessario limitare l'evento clic, ovvero disabilitare l'evento clic. Pensa a come disabilitare l'evento. Sì, è pointer-events ;
Poi c'è il limite di tempo. Dopo ogni clic, deve essere disabilitato automaticamente per 300 ms e verrà ripristinato allo scadere del tempo. Quindi, quali caratteristiche sono legate al ripristino del tempo e dello stato? Esatto, è animazione ;
Inoltre, deve esserci un tempo di attivazione, ecco il comportamento del clic, quindi deve essere correlato alla pseudo-classe : active .
Pertanto, un'analisi completa mostra che pointer-events , animation e :activesono necessari per realizzare una tale funzione, quindi come collegare queste idee in serie?

Ci hai pensato?

In effetti, questo tipo di scena può essere inteso come il controllo dell'animazione CSS. Ad esempio, c'è un pulsante di controllo dell'animazione che cambia da disabilitato -> cliccabile e l'animazione viene rieseguita ogni volta che viene cliccato. Durante il processo di esecuzione, è sempre disabilitato. Ha ottenuto l'effetto di "strozzamento"?

Supponiamo che ci sia un pulsante, associato a un evento click

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

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

Successivamente, associa questa animazione al pulsante

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

Come mostrato di seguito, il valore degli eventi puntatore è nessuno entro 0~0,3 secondi. Quando raggiunge 0,3 secondi, diventa immediatamente tutto. Dal momento che è in avanti, manterrà sempre lo stato di tutti.

Infine, rieseguire l'animazione quando si fa clic, basta impostare l'animazione su nessuno quando si preme.

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'idea specifica è questa, attraverso: active per attivare il cambio di transizione, e quindi impostare dinamicamente lo stato disabilitato del pulsante ascoltando il callback della transizione, come segue:

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

Tuttavia, questo metodo di implementazione è ancora relativamente limitato, limitato ai comportamenti dei clic. In molti casi, la limitazione può essere utilizzata per eventi di scorrimento o eventi della tastiera. Tali scenari possono essere implementati in modi tradizionali.