Scribble Maps Blog
นักพัฒนา: การประหยัดเครดิต Google API ด้วย Autocomplete
มีผู้ได้รับประโยชน์มากมายจากราคา API ใหม่ของ Google อย่างไรก็ตาม หากแอปของคุณใช้ฟังก์ชันแผนที่ครบชุดและคุณมีผู้ใช้จำนวนมาก คุณอาจพบว่าโควตาของคุณจะเริ่มลดลงอย่างรวดเร็ว สองฟังก์ชันที่จะดึงข้อมูลจากโควตาของคุณโดยตรงและไม่อยู่ภายใต้โควตาฟรีรายวันคือ autocomplete และ place search
หากคุณใช้ใบอนุญาต Google ร่วมกับ Scribble Maps API เราได้ทำการเพิ่มประสิทธิภาพเหล่านี้บางส่วนไว้ให้แล้ว แต่หากคุณกำลังสร้างการนำไปใช้งานแบบกำหนดเองของคุณเองโดยตรงบน Google Maps API มีการอัปเดตง่ายๆ ที่คุณสามารถทำได้เพื่อช่วยประหยัดเครดิต autocomplete
ฟังก์ชันการเติมข้อความอัตโนมัติมาตรฐานจะส่งคำขอ autocomplete ทุกครั้งที่มีการเปลี่ยนแปลงในช่องป้อนข้อมูล เป็นไปได้ที่จะลดจำนวนเครดิตที่ใช้ลงอย่างมากโดยการใส่ timeout เมื่อช่องป้อนข้อมูลมีการเปลี่ยนแปลง
นี่คือตัวอย่างพื้นฐาน
ดังนั้นทุกครั้งที่ผู้ใช้เริ่มพิมพ์ในช่องป้อนข้อมูล autocomplete จะไม่ทำงานจนกว่าจะมีการหน่วงเวลาชั่วขณะ การหน่วงเวลา 250ms นี้สามารถลดลงได้เพื่อให้ autocomplete ทำงานบ่อยขึ้น หากผู้ใช้พิมพ์คำว่า "Toronto" อย่างรวดเร็ว จะมีการเรียกใช้ autocomplete เพียงครั้งเดียวแทนที่จะเป็น 8 ครั้งเมื่อผู้ใช้หยุดชะงัก
เราพบว่าการหน่วงเวลาแบบกำหนดเวลานั้นทำงานได้ดีที่สุด จุดสำคัญของเรื่องนี้คือการตรวจสอบให้แน่ใจว่าส่วนติดต่อผู้ใช้แสดงให้เห็นว่ากำลังทำการค้นหาอยู่ในขณะที่พวกเขากำลังพิมพ์ ในกรณีของเรา เราใช้สปินเนอร์แบบเคลื่อนไหว ด้วยวิธีนี้หากผู้ใช้พิมพ์อย่างรวดเร็วและไม่เห็นผลลัพธ์ สปินเนอร์แบบเคลื่อนไหวจะช่วยให้พวกเขาหยุดรอเพื่อดูผลลัพธ์ได้เพียงพอ
ควรสังเกตว่าการนำวิธีนี้ไปใช้เป็นไปตามข้อกำหนดการใช้งานปัจจุบันของพวกเขา สิ่งที่วิธีนี้ทำโดยพื้นฐานแล้วคือการจำกัดปริมาณการเรียกใช้ autocomplete ขาออกจากผู้ใช้เท่านั้น
หากคุณใช้ใบอนุญาต Google ร่วมกับ Scribble Maps API เราได้ทำการเพิ่มประสิทธิภาพเหล่านี้บางส่วนไว้ให้แล้ว แต่หากคุณกำลังสร้างการนำไปใช้งานแบบกำหนดเองของคุณเองโดยตรงบน Google Maps API มีการอัปเดตง่ายๆ ที่คุณสามารถทำได้เพื่อช่วยประหยัดเครดิต autocomplete
ฟังก์ชันการเติมข้อความอัตโนมัติมาตรฐานจะส่งคำขอ autocomplete ทุกครั้งที่มีการเปลี่ยนแปลงในช่องป้อนข้อมูล เป็นไปได้ที่จะลดจำนวนเครดิตที่ใช้ลงอย่างมากโดยการใส่ timeout เมื่อช่องป้อนข้อมูลมีการเปลี่ยนแปลง
นี่คือตัวอย่างพื้นฐาน
var acTimeOut;
textSearchInput.onkeyup = function() {
clearTimeout(acTimeout);
acTimeout = setTimeout(function() {
//put auto-complete calls in here
}, 250);
}
ดังนั้นทุกครั้งที่ผู้ใช้เริ่มพิมพ์ในช่องป้อนข้อมูล autocomplete จะไม่ทำงานจนกว่าจะมีการหน่วงเวลาชั่วขณะ การหน่วงเวลา 250ms นี้สามารถลดลงได้เพื่อให้ autocomplete ทำงานบ่อยขึ้น หากผู้ใช้พิมพ์คำว่า "Toronto" อย่างรวดเร็ว จะมีการเรียกใช้ autocomplete เพียงครั้งเดียวแทนที่จะเป็น 8 ครั้งเมื่อผู้ใช้หยุดชะงัก
เราพบว่าการหน่วงเวลาแบบกำหนดเวลานั้นทำงานได้ดีที่สุด จุดสำคัญของเรื่องนี้คือการตรวจสอบให้แน่ใจว่าส่วนติดต่อผู้ใช้แสดงให้เห็นว่ากำลังทำการค้นหาอยู่ในขณะที่พวกเขากำลังพิมพ์ ในกรณีของเรา เราใช้สปินเนอร์แบบเคลื่อนไหว ด้วยวิธีนี้หากผู้ใช้พิมพ์อย่างรวดเร็วและไม่เห็นผลลัพธ์ สปินเนอร์แบบเคลื่อนไหวจะช่วยให้พวกเขาหยุดรอเพื่อดูผลลัพธ์ได้เพียงพอ
ควรสังเกตว่าการนำวิธีนี้ไปใช้เป็นไปตามข้อกำหนดการใช้งานปัจจุบันของพวกเขา สิ่งที่วิธีนี้ทำโดยพื้นฐานแล้วคือการจำกัดปริมาณการเรียกใช้ autocomplete ขาออกจากผู้ใช้เท่านั้น