Cách sử dụng Throttle với Css thay vì Javascript

Như chúng ta đã biết, điều tiết chức năng là một phương pháp tối ưu hóa rất phổ biến trong JS, phương pháp này có thể tránh việc thực thi các chức năng quá thường xuyên một cách hiệu quả. Trên thực tế, ngoài phương thức JS, CSS cũng có thể triển khai một chức năng như vậy rất dễ dàng mà không cần bất kỳ thư viện khung nào , chúng ta hãy xem.

Ví dụ: một nút lưu, để tránh gửi lặp lại hoặc cân nhắc máy chủ, thường yêu cầu một số hạn chế nhất định đối với hành vi nhấp, chẳng hạn như chỉ cho phép một lần gửi sau mỗi 300 mili giây. Tại thời điểm này, tôi nghĩ rằng hầu hết các sinh viên sẽ trực tiếp sao chép một chức năng bướm ga trên Internet. Hoặc tham khảo trực tiếp thư viện công cụ lodash

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

Tại đây, bạn cần hạn chế sự kiện nhấp chuột, tức là vô hiệu hóa sự kiện nhấp chuột. Hãy suy nghĩ về cách vô hiệu hóa sự kiện. Vâng, đó là sự kiện con trỏ ;
Sau đó là giới hạn thời gian. Sau mỗi lần nhấp, nó cần được tắt tự động trong 300 mili giây và sẽ được khôi phục sau khi hết thời gian. Vì vậy, những tính năng có liên quan đến thời gian và phục hồi trạng thái? Đúng vậy, đó là hoạt hình ;
Ngoài ra, cần phải có thời gian kích hoạt, ở đây là hành vi nhấp chuột, vì vậy nó phải liên quan đến lớp giả : active .
Do đó, phân tích toàn diện cho thấy rằng pointer-events , animation và :activelà cần thiết để thực hiện một chức năng như vậy, vậy làm thế nào để kết nối những ý tưởng này theo chuỗi?

Bạn đã nghĩ về nó chưa?

Trên thực tế, loại cảnh này có thể được hiểu là sự kiểm soát hoạt hình CSS. Ví dụ: có một nút điều khiển hoạt ảnh thay đổi từ bị vô hiệu hóa -> có thể nhấp được và hoạt ảnh được thực hiện lại mỗi khi nhấp vào. Trong quá trình thực hiện, nó luôn bị vô hiệu hóa. Nó có đạt được hiệu quả của việc điều tiết trực tuyến không?

Giả sử có một nút, được liên kết với một sự kiện nhấp chuột

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

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

Tiếp theo, liên kết hoạt ảnh này với nút

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

Như được hiển thị bên dưới, giá trị của các sự kiện con trỏ không có giá trị nào trong vòng 0~0,3 giây. Khi đạt đến 0,3 giây, nó ngay lập tức trở thành tất cả. Vì là tiền đạo nên nó sẽ luôn duy trì trạng thái của tất cả.

Cuối cùng, thực hiện lại hoạt ảnh khi nhấp, chỉ cần đặt hoạt ảnh thành không có khi nhấn.

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

Ý tưởng cụ thể là: thông qua: active để kích hoạt thay đổi chuyển đổi, sau đó tự động đặt trạng thái bị vô hiệu hóa của nút bằng cách nghe lệnh gọi lại chuyển đổi, như sau:

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

Tuy nhiên, phương pháp triển khai này vẫn còn tương đối hạn chế, chỉ giới hạn ở các hành vi nhấp chuột. Trong nhiều trường hợp, điều tiết có thể được sử dụng cho các sự kiện cuộn hoặc sự kiện bàn phím. Các kịch bản như vậy có thể được thực hiện theo những cách truyền thống.