Javascript 대신 Css로 Throttle을 사용하는 방법

우리 모두 알고 있듯이 함수 스로틀은 JS에서 매우 일반적인 최적화 방법으로 너무 자주 실행되는 함수를 효과적으로 피할 수 있습니다. 사실 JS 방법 외에도 CSS는 프레임워크 라이브러리 없이 이러한 기능을 매우 쉽게 구현할 수 있습니다. , 한 번 보자.

예를 들어 저장 버튼은 반복적인 제출이나 서버 고려를 피하기 위해 클릭 동작에 대한 특정 제한이 필요한 경우가 많습니다(예: 300ms마다 한 번의 제출만 허용). 이때 대부분의 학생들은 인터넷에서 throttle 기능을 직접 복사할 것이라고 생각합니다. 또는 lodash 도구 라이브러리를 직접 참조하십시오.

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

여기에서 클릭 이벤트를 제한, 즉 클릭 이벤트를 비활성화해야 합니다. 이벤트를 비활성화하는 방법에 대해 생각해 보십시오. 예, 포인터 이벤트 입니다 .
그러면 시간 제한이 있습니다. 클릭할 때마다 300ms 동안 자동으로 비활성화되어야 하며 시간이 지나면 복원됩니다. 그렇다면 시간 및 상태 복원과 관련된 기능은 무엇입니까? 맞습니다 . 애니메이션 입니다.
또한 트리거 시간이 있어야 합니다. 여기 클릭 동작이 있으므로 pseudo-class : 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;
}

아래와 같이 pointer-events의 값은 0~0.3초 이내에는 none입니다. 0.3초에 도달하면 즉시 전체가 됩니다. 포워드이기 때문에 항상 모두의 상태를 유지합니다.

마지막으로 클릭할 때 애니메이션을 다시 실행하고 누를 때 애니메이션을 없음으로 설정하면 됩니다.

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

구체적인 아이디어는 전환 변경을 트리거하는 활성을 통해 다음과 같이 전환 콜백을 수신하여 버튼의 비활성화 상태를 동적으로 설정하는 것입니다.

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

그러나 이 구현 방법은 여전히 ​​비교적 제한적이며 클릭 동작으로 제한됩니다. 대부분의 경우 스로틀링은 이벤트나 키보드 이벤트를 스크롤하는 데 사용될 수 있습니다. 이러한 시나리오는 전통적인 방식으로 구현할 수 있습니다.