Как использовать Throttle с Css вместо Javascript

Как мы все знаем, функция дросселирования — это очень распространенный метод оптимизации в JS, который может эффективно избежать слишком частого выполнения функций. Фактически, в дополнение к методу JS, CSS также может очень легко реализовать такую ​​функцию без какой-либо библиотеки фреймворка. , Давайте взглянем.

Например: кнопка сохранения, чтобы избежать повторных отправок или соображений сервера, часто требует определенных ограничений на поведение кликов, например, разрешает только одну отправку каждые 300 мс. В настоящее время, я думаю, большинство студентов будут напрямую копировать функцию дроссельной заслонки в Интернете. Или напрямую ссылайтесь на библиотеку инструментов lodash

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

Здесь вам нужно ограничить событие клика, то есть отключить событие клика. Подумайте, как отключить событие. Да, это события указателя ;
Тогда есть ограничение по времени. После каждого клика его нужно автоматически отключать на 300 мс, и он будет восстанавливаться по истечении времени. Итак, какие особенности связаны с восстановлением времени и состояния? Правильно, это анимация ;
Кроме того, должно быть время срабатывания, вот поведение щелчка, поэтому оно должно быть связано с псевдоклассом : active .
Таким образом, всесторонний анализ показывает, что события указателя , анимация и :activeнеобходимы для реализации такой функции, так как же соединить эти идеи последовательно?

Вы думали об этом?

По сути, такую ​​сцену можно понимать как управление анимацией CSS. Например, есть кнопка управления анимацией, которая меняется с отключенной на активную, и анимация выполняется повторно при каждом нажатии. В процессе выполнения он всегда отключен. Достигнут ли эффект «троттлинга»?

Предположим, есть кнопка, привязанная к событию клика.

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

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

Далее привязываем эту анимацию к кнопке

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

Как показано ниже, значение событий указателя равно нулю в пределах 0~0,3 секунды. Как только он достигает 0,3 секунды, он сразу становится всем. Поскольку он направлен вперед, он всегда будет поддерживать состояние всех.

Наконец, повторно выполните анимацию при нажатии, просто установите для анимации значение none при нажатии.

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

Конкретная идея заключается в следующем: через: active инициировать изменение перехода, а затем динамически устанавливать отключенное состояние кнопки, прослушивая обратный вызов перехода, следующим образом:

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

Тем не менее, этот метод реализации все еще относительно ограничен, ограничивается поведением кликов. Во многих случаях регулирование может использоваться для событий прокрутки или событий клавиатуры. Такие сценарии могут быть реализованы традиционными способами.