ทำ Search input ยังไง? ให้ UX และ Performance ดีเยี่ยม ด้วย “debounce”

Blog นี้จะมาสอนทำ search inputโดยการใช้ debounce เพื่อไม่ให้ เกิดการยิง request รัวๆ API จะได้ไม่ต้องทำงานหนัก โดยจะยกตัวอย่างการทำกับ Vue นะครับ

เคยไหมครับทำ input search เเล้วตอนพิมพ์ไปทุกคำที่เราพิมพ์ไปจะเข้าไปถูกเรียกที่ network(สามารถดูได้ จากการ inspector) นั้นเเหละครับอาจจะทำให้เกิดการทำงานหนักของหน้าเว็บและ server ของเรา ซึ่งเราสามารถแก้ไขได้ด้วยวิธีง่ายได้จากการใช้ debounce มาช่วย ผมเลือกให้ lodash.debounce สามารถ install ได้ผ่าน npm

npm install lodash.debounce

ตัวอย่าง input search ด้วยวิธีธรรมดา ไม่ handle การพิมพ์รัวๆ

search

network inspector

ตัวอย่าง input search ที่ handle การ search ไม่ให้พิมพ์รัวๆ โดยการใช้ debounce network ที่เข้าก็จะเหลือเเค่ query เดียวในเวลาที่เราตั้งไว้

network inspector

debounce คือ คือการป้องกันการเรียก function ซ้ำโดยการกำหนดเวลาหน่วงก่อนจะเกิดการเรียก function นั้นซ้ำอีก

ตัวอย่างการเรียกใช้ search input โดยใช้ debounce มาช่วย

จากตัวอย่าง code จะเห็นมีการสร้าง input เอาไว้ที่ template เเละมีการ import debounce มาใช้ เเล้วเรียก watch inputValue model ไว้และเรียก debounce เเละหน่วงเวลา 500 ms เเล้วค่อยไปเรียก function ต่อนั้นเอง

สรุป

Blog นี้มาทำความรู้จักกับ debounce เพื่อเอามาใช้เพิ่ม performance ให้กับเว็บโดยการป้องกันไม่ให้เกิดการ search เเล้วเรียก function ซ้ำๆ ถ้าใครมีข้อสัยหรืออยากแนะนำสามารถ comment มาได้เลยนะครับ สำหรับ blog นี้ผมต้องขอตัวก่อน สวัสดีครับบบบบบ