Cara menggunakan Throttle dengan Css, bukan Javascript

Seperti yang kita semua tahu, throttle fungsi adalah metode pengoptimalan yang sangat umum di JS, yang secara efektif dapat menghindari eksekusi fungsi terlalu sering. Bahkan, selain metode JS, CSS juga dapat mengimplementasikan fungsi seperti itu dengan sangat mudah tanpa pustaka kerangka apa pun , Mari lihat.

Misalnya: tombol simpan, untuk menghindari pengiriman berulang atau pertimbangan server, seringkali memerlukan batasan tertentu pada perilaku klik, seperti hanya mengizinkan satu pengiriman setiap 300ms. Saat ini, menurut saya sebagian besar siswa akan langsung menyalin fungsi throttle di Internet. Atau langsung rujuk pustaka alat lodash

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

Di sini, Anda perlu membatasi acara klik, yaitu menonaktifkan acara klik. Pikirkan tentang cara menonaktifkan acara tersebut. Ya, itu adalah pointer-events ;
Lalu ada batas waktu. Setelah setiap klik, perlu dinonaktifkan secara otomatis selama 300 md, dan akan dipulihkan setelah waktu berlalu. Jadi, fitur apa yang terkait dengan pemulihan waktu dan keadaan? Benar, itu animasi ;
Selain itu, perlu ada waktu pemicu, ini perilaku kliknya, jadi harus terkait dengan pseudo-class : active .
Oleh karena itu, analisis komprehensif menunjukkan bahwa pointer-events , animation dan :activediperlukan untuk mewujudkan fungsi seperti itu, jadi bagaimana menghubungkan ide-ide ini secara seri?

Sudahkah Anda memikirkannya?

Padahal, scene semacam ini bisa dipahami sebagai kontrol animasi CSS. Misalnya, ada tombol kontrol animasi yang berubah dari dinonaktifkan -> dapat diklik, dan animasi dijalankan kembali setiap kali diklik. Selama proses eksekusi, itu selalu dinonaktifkan. Apakah itu mencapai efek "pelambatan"?

Misalkan ada sebuah tombol, terikat pada event klik

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

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

Selanjutnya, ikat animasi ini ke tombol

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

Seperti yang ditunjukkan di bawah, nilai peristiwa penunjuk tidak ada dalam 0~0,3 detik. Begitu mencapai 0,3 detik, langsung menjadi semua. Karena itu maju, itu akan selalu mempertahankan keadaan semua.

Terakhir, jalankan kembali animasi saat mengklik, cukup setel animasi ke none saat menekan.

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

Ide spesifiknya adalah, through: active untuk memicu perubahan transisi, dan kemudian secara dinamis menyetel status tombol yang dinonaktifkan dengan mendengarkan callback transisi, sebagai berikut:

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

Namun, metode penerapan ini masih relatif terbatas, terbatas pada perilaku klik. Dalam banyak kasus, pelambatan dapat digunakan untuk acara pengguliran atau acara keyboard. Skenario seperti itu dapat diimplementasikan dengan cara tradisional.