Javascript yerine Css ile Throttle nasıl kullanılır?

Hepimizin bildiği gibi, function throttle, JS'de çok yaygın bir optimizasyon yöntemidir ve bu, işlevlerin çok sık yürütülmesini etkili bir şekilde önleyebilir. Aslında, JS yöntemine ek olarak, CSS de böyle bir işlevi herhangi bir çerçeve kitaplığı olmadan çok kolay bir şekilde uygulayabilir. , Hadi bir bakalım.

Örneğin: tekrarlanan gönderimlerden veya sunucuyla ilgili değerlendirmelerden kaçınmak için bir kaydet düğmesi, tıklama davranışında genellikle belirli kısıtlamalar gerektirir, örneğin her 300 ms'de yalnızca bir gönderime izin vermek gibi. Şu anda, çoğu öğrencinin internetteki bir kısma işlevini doğrudan kopyalayacağını düşünüyorum. Veya doğrudan lodash araç kitaplığına başvurun

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

Burada click olayını kısıtlamanız yani click olayını devre dışı bırakmanız gerekiyor. Etkinliği nasıl devre dışı bırakacağınızı düşünün. Evet, pointer-events ;
Sonra zaman sınırı var. Her tıklamadan sonra otomatik olarak 300ms süreyle devre dışı bırakılması gerekir ve süre geçtikten sonra geri yüklenir. Peki, zaman ve durum restorasyonu ile ilgili özellikler nelerdir? Bu doğru, animasyon ;
Ek olarak, bir tetikleme süresi olması gerekir, işte tıklama davranışı, bu yüzden sözde sınıfla ilgili olmalıdır : active .
Bu nedenle, kapsamlı analiz, işaretçi olayları , animasyon ve :aktif olduğunu gösterir.böyle bir işlevi gerçekleştirmek için ihtiyaç var, peki bu fikirleri seri olarak nasıl bağlayacağız?

Bunun hakkında düşündün mü?

Aslında bu tür bir sahne, CSS animasyonunun kontrolü olarak da anlaşılabilir. Örneğin, devre dışı -> tıklanabilir konumundan değişen bir animasyon kontrol düğmesi vardır ve her tıklandığında animasyon yeniden yürütülür. Yürütme işlemi sırasında, her zaman devre dışı bırakılır. “Kısma” etkisine ulaştı mı?

Bir tıklama olayına bağlı bir düğme olduğunu varsayalım

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

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

Ardından, bu animasyonu düğmeye bağlayın

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

Aşağıda gösterildiği gibi, işaretçi olaylarının değeri 0~0,3 saniye içinde sıfırdır. 0,3 saniyeye ulaştığında, hemen hepsi olur. İleriye dönük olduğu için, her zaman herkesin durumunu koruyacaktır.

Son olarak, tıkladığınızda animasyonu yeniden çalıştırın, sadece basarken animasyonu yok olarak ayarlayı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;
  }
}

Spesifik fikir şudur: geçiş değişikliğini tetiklemek için aktif ve ardından geçiş geri aramasını dinleyerek düğmenin devre dışı durumunu aşağıdaki gibi dinamik olarak ayarlayın:

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

Ancak, bu uygulama yöntemi hala nispeten sınırlıdır, tıklama davranışlarıyla sınırlıdır. Çoğu durumda, kaydırma olayları veya klavye olayları için kısma kullanılabilir. Bu tür senaryolar geleneksel yollarla uygulanabilir.