Jak używać Throttle z CSS zamiast JavaScript

Jak wszyscy wiemy, ograniczanie funkcji jest bardzo powszechną metodą optymalizacji w JS, która pozwala skutecznie uniknąć zbyt częstego wykonywania funkcji. W rzeczywistości, oprócz metody JS, CSS może również bardzo łatwo zaimplementować taką funkcję bez żadnej biblioteki frameworka , Spójrzmy.

Na przykład: przycisk Zapisz, aby uniknąć powtarzających się zgłoszeń lub problemów z serwerem, często wymaga pewnych ograniczeń dotyczących kliknięć, takich jak zezwalanie tylko na jedno przesyłanie co 300 ms. W tej chwili myślę, że większość uczniów będzie bezpośrednio kopiować funkcję przepustnicy w Internecie. Lub bezpośrednio odwołaj się do biblioteki narzędzi lodash

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

Tutaj musisz ograniczyć zdarzenie kliknięcia, to znaczy wyłączyć zdarzenie kliknięcia. Pomyśl, jak wyłączyć wydarzenie. Tak, to jest pointer-events ;
Potem jest limit czasu. Po każdym kliknięciu musi być automatycznie wyłączany na 300 ms, a po upływie tego czasu zostanie przywrócony. Jakie więc cechy są związane z przywracaniem czasu i stanu? Zgadza się, to animacja ;
Ponadto musi istnieć czas wyzwalania, oto zachowanie kliknięcia, więc musi być powiązane z pseudoklasą : active .
Dlatego wszechstronna analiza pokazuje, że pointer-events , animacja i :activesą potrzebne do realizacji takiej funkcji, więc jak połączyć te pomysły szeregowo?

Czy myślałeś o tym?

W rzeczywistości ten rodzaj sceny można rozumieć jako sterowanie animacją CSS. Na przykład istnieje przycisk sterowania animacją, który zmienia się z wyłączonego na klikalny, a animacja jest odtwarzana za każdym razem, gdy zostanie kliknięta. Podczas procesu wykonywania jest zawsze wyłączona. Czy osiągnął efekt „throttlingu”?

Załóżmy, że istnieje przycisk powiązany ze zdarzeniem kliknięcia

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

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

Następnie powiąż tę animację z przyciskiem

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

Jak pokazano poniżej, wartość pointer-events wynosi zero w ciągu 0~0,3 sekundy. Gdy osiągnie 0,3 sekundy, natychmiast staje się wszystkim. Ponieważ jest do przodu, zawsze będzie utrzymywać stan wszystkich.

Na koniec ponownie wykonaj animację po kliknięciu, po prostu ustaw animację na brak podczas naciskania.

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

Konkretny pomysł polega na tym, że: aktywuje się, aby wywołać zmianę przejścia, a następnie dynamicznie ustawia stan wyłączenia przycisku, nasłuchując wywołania zwrotnego przejścia, w następujący sposób:

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

Jednak ta metoda implementacji jest nadal stosunkowo ograniczona, ograniczona do zachowań związanych z kliknięciami. W wielu przypadkach ograniczanie może być używane do przewijania zdarzeń lub zdarzeń klawiatury. Takie scenariusze można realizować w tradycyjny sposób.