วิธีใช้ Throttle กับ Css แทน Javascript

อย่างที่เราทราบกันดีว่า Function Throttle เป็นวิธีการเพิ่มประสิทธิภาพที่ใช้กันทั่วไปใน JS ซึ่งสามารถหลีกเลี่ยงการเรียกใช้ฟังก์ชันบ่อยเกินไปได้อย่างมีประสิทธิภาพ อันที่จริง นอกจากวิธี JS แล้ว CSS ยังสามารถนำฟังก์ชันดังกล่าวไปใช้ได้อย่างง่ายดายโดยไม่ต้องมีไลบรารีเฟรมเวิร์กใดๆ ลองมาดูกัน

ตัวอย่างเช่น: ปุ่มบันทึก เพื่อหลีกเลี่ยงการส่งซ้ำหรือการพิจารณาจากเซิร์ฟเวอร์ มักต้องมีข้อจำกัดบางประการเกี่ยวกับลักษณะการคลิก เช่น อนุญาตให้ส่งเพียงครั้งเดียวทุกๆ 300 มิลลิวินาที ในตอนนี้ ฉันคิดว่านักเรียนส่วนใหญ่จะคัดลอกฟังก์ชันเค้นบนอินเทอร์เน็ตโดยตรง หรืออ้างอิงไลบรารีเครื่องมือ lodash โดยตรง

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

ที่นี่ คุณต้องจำกัดเหตุการณ์การคลิก นั่นคือ ปิดใช้งานเหตุการณ์การคลิก คิดเกี่ยวกับวิธีปิดการใช้งานเหตุการณ์ ใช่ มันคือpointer-events ;
แล้วมีเวลาจำกัด หลังจากการคลิกแต่ละครั้ง จะต้องปิดใช้งานโดยอัตโนมัติเป็นเวลา 300 มิลลิวินาที และจะถูกกู้คืนหลังจากเวลาผ่านไป คุณลักษณะใดที่เกี่ยวข้องกับการฟื้นฟูเวลาและสถานะ ถูกต้อง มันคืออนิเมชั่น ;
นอกจากนี้ ต้องมีเวลาทริกเกอร์ นี่คือพฤติกรรมการคลิก ดังนั้นจึงต้องเกี่ยวข้องกับ pseudo-class : active
ดังนั้น การวิเคราะห์อย่างครอบคลุมแสดงให้เห็นว่าpointer-event , animationและ: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-event ไม่มีค่าภายใน 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
})

อย่างไรก็ตาม วิธีการใช้นี้ยังค่อนข้างจำกัด โดยจำกัดเฉพาะพฤติกรรมการคลิกเท่านั้น ในหลายกรณี การควบคุมอาจใช้สำหรับการเลื่อนเหตุการณ์หรือเหตุการณ์แป้นพิมพ์ สถานการณ์ดังกล่าวสามารถนำไปใช้ในแบบดั้งเดิม