การสร้างฮุกกำหนดเอง useThrottle

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

ค่าประทับเวลาการทำงานครั้งล่าสุดต้องคงอยู่ข้ามการวาดใหม่โดยไม่ทำให้เกิดการวาดใหม่ด้วยตัวมันเอง ดังนั้น useRef จึงเป็นเครื่องมือที่เหมาะสม ให้เก็บค่าประทับเวลาเป็น const lastRunTime = useRef(Date.now()) ต่างจากสถานะ การอัปเดตการอ้างอิงจะไม่ทำให้เกิดการวาดใหม่ ตรรกะของทรอตเทิลจึงทำงานได้อย่างมีประสิทธิภาพโดยไม่สร้างรอบการทำงานเพิ่มเติม

ฮุก useThrottle(value, delay) จะคืนค่าป้อนเข้าที่ผ่านการจำกัดความถี่ สัญญาการทำงานคล้ายกับ useDebounce: รับค่าใดก็ได้และระยะหน่วงเป็นมิลลิวินาที แล้วคืนค่าที่ผ่านทรอตเทิล คอมโพเนนต์ใช้งานในลักษณะเดียวกันได้ จึงเป็นทางเลือกที่นำมาแทนที่ได้ทันทีสำหรับรูปแบบการจับเวลาที่แตกต่างกัน

การจำกัดความถี่แบบขอบท้ายจะอัปเดตค่าเมื่อสิ้นสุดแต่ละช่วงเวลา เมื่อมีค่าใหม่เข้ามา ให้ตั้งเวลา setTimeout ตามเวลาที่เหลือของช่วงเวลา: delay - (Date.now() - lastRunTime.current) เมื่อตัวจับเวลาทำงาน ให้อัปเดตสถานะและบันทึก lastRunTime ค่าใหม่ ยกเลิกตัวจับเวลาก่อนหน้าในขั้นตอนการล้างข้อมูล

การจำกัดความถี่แบบขอบหน้าจะใช้ค่าครั้งแรกทันทีและละเว้นค่าถัดไปจนกว่าช่วงเวลาจะหมด ให้ตรวจสอบว่า Date.now() - lastRunTime.current >= delay หรือไม่ หากเป็นจริง ให้อัปเดตสถานะและบันทึกเวลา มิฉะนั้นให้ข้ามการอัปเดต วิธีนี้ให้ผลตอบสนองทันทีต่อการกระทำแรก พร้อมช่วงพักหลังจากนั้น

ประสบการณ์ผู้ใช้ที่ดีที่สุดมักรวมทั้งสองแบบเข้าด้วยกัน ได้แก่ ตอบสนองทันทีต่อเหตุการณ์แรก (ขอบหน้า) จากนั้นตรวจสอบให้แน่ใจว่าสถานะสุดท้ายถูกใช้หลังจากช่วงเวลาผ่านไป (ขอบท้าย) ผู้ใช้จึงเห็นการตอบสนองแรกที่รวดเร็ว และค่าสุดท้ายที่คงอยู่จะถูกใช้งานเสมอหลังการเคลื่อนไหวหยุดลง ซึ่งช่วยป้องกันสถานะสุดท้ายที่ล้าสมัย

เก็บรหัสหมดเวลาที่รอดำเนินการไว้ใน useRef: const timeoutRef = useRef(null) ก่อนตั้งเวลาหมดเวลาใหม่ ให้เรียก clearTimeout(timeoutRef.current) เพื่อยกเลิกตัวจับเวลาที่มีอยู่ วิธีนี้ป้องกันไม่ให้มีตัวจับเวลาหลายตัวทำงานซ้อนกัน ซึ่งอาจทำให้เกิดการอัปเดตหลายครั้งภายในช่วงเวลาจำกัดความถี่เดียว

ฟังก์ชันล้างข้อมูลของ useEffect ควรเรียก clearTimeout(timeoutRef.current) เพื่อยกเลิกการอัปเดตขอบท้ายที่รอดำเนินการเมื่อคอมโพเนนต์ถูกถอดออก หากไม่มีการทำเช่นนี้ รหัสหมดเวลาที่รอดำเนินการจะทำงานหลังจากถอดคอมโพเนนต์ออก และพยายามตั้งค่าสถานะบนคอมโพเนนต์ที่ถูกถอดออกแล้ว ซึ่งอาจทำให้รีแอ็กต์แสดงคำเตือน

แทนที่จะใช้ฮุกที่อิงตามค่า คุณสามารถสร้างฮุกจำกัดความถี่ที่อิงตาม useCallback ได้: useThrottledCallback(fn, delay) จะส่งคืนฟังก์ชันเวอร์ชันที่ถูกจำกัดความถี่ วิธีนี้ยืดหยุ่นกว่าเมื่อสิ่งที่ต้องการจำกัดความถี่คือการเรียกใช้ฟังก์ชัน เช่น ตัวติดตามการวิเคราะห์ แทนที่จะเป็นค่าที่ตอบสนองต่อการเปลี่ยนแปลง

ในการทดสอบของเจสต์ ให้ใช้ jest.useFakeTimers() เพื่อควบคุมเวลา ตั้งค่าการจำกัดความถี่ด้วยความล่าช้า 1,000 มิลลิวินาที ทำให้ค่าเปลี่ยนแปลงอย่างรวดเร็ว 10 ครั้ง จากนั้นเลื่อนเวลาเสมือนไปข้างหน้า 500 มิลลิวินาที และตรวจสอบว่าเกิดการอัปเดตเพียง 1 หรือ 2 ครั้ง เลื่อนเวลาไปข้างหน้าอีก 500 มิลลิวินาที แล้วตรวจสอบว่าการอัปเดตขอบท้ายทำงาน วิธีนี้ตรวจสอบพฤติกรรมของการจำกัดความถี่ได้อย่างแน่นอนและทำซ้ำได้

รีแอ็กต์ประมวลผลการอัปเดตสถานะเป็นชุดระหว่างการแสดงผล การจำกัดความถี่ที่ทำงานกับการอัปเดตสถานะจึงทำงานร่วมกับโมเดลนี้ได้อย่างราบรื่น อย่างไรก็ตาม โปรดทราบว่าในโหมดทำงานพร้อมกันของรีแอ็กต์ 18 การแสดงผลอาจถูกขัดจังหวะได้ ตรรกะการจำกัดความถี่เอง ซึ่งอิงตามเวลาจริงบนโลกผ่าน Date.now() จะไม่ได้รับผลกระทบจากการจัดตารางงานของรีแอ็กต์

การจำกัดความถี่แบบ “ขอบท้าย” ทำงานที่ขอบใด

การจำกัดความถี่ต้องติดตามเวลาที่ทำงานครั้งล่าสุดด้วย useRef ฮุกสามารถใช้ขอบหน้า (ทันที) ขอบท้าย (หน่วงไว้) หรือใช้ทั้งสองแบบได้ ให้เก็บรหัสหมดเวลาไว้ในรีฟเสมอ และยกเลิกในขั้นตอนการล้างข้อมูล สำหรับกรณีใช้งานที่อิงตามฟังก์ชัน ให้เลือกใช้รูปแบบ useThrottledCallback ทดสอบด้วยตัวจับเวลาจำลองเพื่อความน่าเชื่อถือ