Como usar o Throttle com Css em vez de Javascript

Como todos sabemos, o acelerador de função é um método de otimização muito comum em JS, que pode efetivamente evitar a execução de funções com muita frequência. , vamos dar uma olhada.

Por exemplo: um botão salvar, para evitar envios repetidos ou considerações do servidor, geralmente requer certas restrições no comportamento do clique, como permitir apenas um envio a cada 300ms. Neste momento, acho que a maioria dos alunos copiará diretamente uma função de aceleração na Internet. Ou consulte diretamente a biblioteca de ferramentas lodash

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

Aqui, você precisa restringir o evento click, ou seja, desabilitar o evento click. Pense em como desativar o evento. Sim, são eventos de ponteiro ;
Depois, há o limite de tempo. Após cada clique, ele precisa ser desativado automaticamente por 300ms e será restaurado após o tempo. Então, quais recursos estão relacionados à restauração do tempo e do estado? Isso mesmo, é animação ;
Além disso, precisa haver um tempo de disparo, aqui está o comportamento do clique, portanto deve estar relacionado à pseudoclasse : active .
Portanto, uma análise abrangente mostra que pointer-events , animation e :activesão necessários para realizar tal função, então como conectar essas ideias em série?

Você já pensou sobre isso?

Na verdade, esse tipo de cena pode ser entendido como o controle da animação CSS. Por exemplo, há um botão de controle de animação que muda de desabilitado -> clicável, e a animação é reexecutada toda vez que é clicada. Durante o processo de execução, está sempre desabilitado. Conseguiu o efeito de “estrangulamento”?

Suponha que haja um botão vinculado a um evento de clique

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

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

Em seguida, vincule esta animação ao botão

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

Conforme mostrado abaixo, o valor de pointer-events é nenhum dentro de 0~0,3 segundos. Quando atinge 0,3 segundos, torna-se imediatamente tudo. Por ser avançado, sempre manterá o estado de todos.

Por fim, execute novamente a animação ao clicar, basta definir a animação para nenhum ao pressionar.

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

A ideia específica é esta, por meio de: active para acionar a mudança de transição e, em seguida, defina dinamicamente o estado desabilitado do botão ouvindo o retorno de chamada da transição, da seguinte forma:

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

No entanto, esse método de implementação ainda é relativamente limitado, limitado a comportamentos de clique. Em muitos casos, a limitação pode ser usada para eventos de rolagem ou eventos de teclado. Esses cenários podem ser implementados de maneiras tradicionais.