So verwenden Sie Throttle mit Css anstelle von Javascript

Wie wir alle wissen, ist Function Throttle eine sehr verbreitete Optimierungsmethode in JS, die das zu häufige Ausführen von Funktionen effektiv vermeiden kann. Tatsächlich kann neben der JS-Methode auch CSS eine solche Funktion sehr einfach ohne jegliche Framework-Bibliothek implementieren , Lass uns einen Blick darauf werfen.

Zum Beispiel: Ein Speichern-Button erfordert, um wiederholte Übermittlungen oder Serverüberlegungen zu vermeiden, oft bestimmte Einschränkungen des Klickverhaltens, z. B. nur eine Übermittlung alle 300 ms zuzulassen. Ich denke, dass die meisten Studenten derzeit eine Drosselfunktion direkt im Internet kopieren werden. Oder verweisen Sie direkt auf die Lodash-Werkzeugbibliothek

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

Hier müssen Sie das Click-Event einschränken, also das Click-Event deaktivieren. Denken Sie darüber nach, wie Sie das Ereignis deaktivieren können. Ja, es sind Zeigerereignisse ;
Dann ist da noch die Frist. Nach jedem Klick muss es automatisch für 300 ms deaktiviert werden und wird nach Ablauf der Zeit wiederhergestellt. Welche Funktionen hängen also mit der Wiederherstellung von Zeit und Zustand zusammen? Das ist richtig, es ist Animation ;
Außerdem muss es eine Auslösezeit geben, hier das Klickverhalten, also muss es sich auf die Pseudo-Klasse beziehen : active .
Daher zeigt eine umfassende Analyse, dass pointer-events , animation und :activewerden benötigt, um eine solche Funktion zu realisieren, also wie kann man diese Ideen in Reihe schalten?

Hast du darüber nachgedacht?

Tatsächlich kann diese Art von Szene als Steuerung einer CSS-Animation verstanden werden. Beispielsweise gibt es eine Schaltfläche zur Animationssteuerung, die sich von deaktiviert -> anklickbar ändert, und die Animation wird bei jedem Klick erneut ausgeführt. Während des Ausführungsprozesses ist es immer deaktiviert. Hat es den Effekt des „Drosselns“ erreicht?

Angenommen, es gibt eine Schaltfläche, die an ein Klickereignis gebunden ist

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

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

Als nächstes binden Sie diese Animation an die Schaltfläche

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

Wie unten gezeigt, ist der Wert von Zeigerereignissen innerhalb von 0 bis 0,3 Sekunden gleich Null. Sobald es 0,3 Sekunden erreicht, wird es sofort alles. Da es vorwärts ist, behält es immer den Zustand von allem bei.

Führen Sie abschließend die Animation beim Klicken erneut aus, setzen Sie die Animation beim Drücken einfach auf keine.

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

Die spezifische Idee ist folgende: aktiv, um die Übergangsänderung auszulösen, und dann den deaktivierten Zustand der Schaltfläche dynamisch festzulegen, indem der Übergangs-Callback wie folgt abgehört wird:

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

Diese Implementierungsmethode ist jedoch immer noch relativ begrenzt und auf das Klickverhalten beschränkt. In vielen Fällen kann die Drosselung für Scroll-Ereignisse oder Tastaturereignisse verwendet werden. Solche Szenarien können auf herkömmliche Weise implementiert werden.