कैसे जावास्क्रिप्ट के बजाय सीएसएस के साथ थ्रॉटल का उपयोग करें

जैसा कि हम सभी जानते हैं, जेएस में फ़ंक्शन थ्रॉटल एक बहुत ही सामान्य अनुकूलन विधि है, जो प्रभावी रूप से कार्यों के निष्पादन को बहुत बार टाल सकती है। वास्तव में, जेएस विधि के अलावा, सीएसएस भी इस तरह के फ़ंक्शन को बिना किसी फ्रेमवर्क लाइब्रेरी के बहुत आसानी से लागू कर सकता है। , चलो एक नज़र डालते हैं।

उदाहरण के लिए: एक सेव बटन, बार-बार सबमिशन या सर्वर के विचारों से बचने के लिए, अक्सर क्लिक व्यवहार पर कुछ प्रतिबंधों की आवश्यकता होती है, जैसे कि प्रत्येक 300ms में केवल एक सबमिशन की अनुमति देना। इस समय, मुझे लगता है कि अधिकांश छात्र सीधे इंटरनेट पर थ्रॉटल फ़ंक्शन की नकल करेंगे। या सीधे लॉश टूल लाइब्रेरी का संदर्भ लें

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

यहां, आपको क्लिक ईवेंट को प्रतिबंधित करने की आवश्यकता है, अर्थात क्लिक ईवेंट को अक्षम करें। ईवेंट को अक्षम करने के तरीके के बारे में सोचें। हाँ, यह सूचक-घटनाएँ है ;
फिर समय सीमा है। प्रत्येक क्लिक के बाद, इसे 300ms के लिए स्वचालित रूप से अक्षम करने की आवश्यकता होती है, और समय बीतने के बाद इसे पुनर्स्थापित कर दिया जाएगा। तो, कौन सी विशेषताएँ समय और राज्य बहाली से संबंधित हैं? यह सही है, यह एनिमेशन है ;
इसके अलावा, एक ट्रिगर समय होना चाहिए, यहां क्लिक व्यवहार है, इसलिए इसे छद्म वर्ग से संबंधित होना चाहिए : सक्रिय ।
इसलिए, व्यापक विश्लेषण से पता चलता है कि सूचक-ईवेंट , एनीमेशन और : सक्रियइस तरह के एक समारोह को महसूस करने की जरूरत है, तो इन विचारों को श्रृंखला में कैसे जोड़ा जाए?

क्या आपने इसके बारे में सोचा है?

वास्तव में, इस तरह के दृश्य को सीएसएस एनीमेशन के नियंत्रण के रूप में समझा जा सकता है। उदाहरण के लिए, एक एनीमेशन नियंत्रण बटन है जो अक्षम -> क्लिक करने योग्य से बदलता है, और हर बार क्लिक करने पर एनीमेशन को फिर से निष्पादित किया जाता है। निष्पादन प्रक्रिया के दौरान, यह हमेशा अक्षम होता है। क्या इसने "थ्रॉटलिंग" का प्रभाव प्राप्त किया?

मान लीजिए कि एक क्लिक ईवेंट के लिए बाध्य एक बटन है

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

जैसा कि नीचे दिखाया गया है, सूचक-घटनाओं का मान 0 ~ 0.3 सेकंड के भीतर कोई नहीं है। एक बार जब यह 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
})

हालाँकि, यह कार्यान्वयन विधि अभी भी अपेक्षाकृत सीमित है, क्लिक व्यवहारों तक सीमित है। कई मामलों में, स्क्रॉलिंग इवेंट्स या कीबोर्ड इवेंट्स के लिए थ्रॉटलिंग का उपयोग किया जा सकता है। ऐसे परिदृश्यों को पारंपरिक तरीकों से लागू किया जा सकता है।