Scribble Maps Blog
ນັກພັດທະນາ: ການປະຢັດເຄຣດິດ Google API ດ້ວຍ Autocomplete
ມີຜູ້ໄດ້ຮັບຜົນປະໂຫຍດຫຼາຍຄົນຈາກການກຳນົດລາຄາ API ໃໝ່ຂອງ Google. ແນວໃດກໍຕາມ, ຖ້າແອັບຯຂອງທ່ານກຳລັງໃຊ້ງານຟັງຊັນແຜນທີ່ທັງໝົດ ແລະທ່ານມີຜູ້ໃຊ້ຈຳນວນຫຼາຍ ທ່ານອາດຈະພົບວ່າເຄຣດິດຂອງທ່ານຈະເລີ່ມຫຼຸດລົງຢ່າງໄວວາ. ສອງຟັງຊັນທີ່ຈະດຶງເຄຣດິດຈາກທ່ານໂດຍກົງ ແລະບໍ່ຢູ່ພາຍໃຕ້ໂຄຕາຟຣີປະຈຳວັນແມ່ນ autocomplete ແລະ place search.
ຖ້າທ່ານໃຊ້ໃບອະນຸຍາດ Google ຂອງທ່ານກັບ Scribble Maps API ພວກເຮົາມີການປັບປຸງບາງຢ່າງເຫຼົ່ານີ້ໃຫ້ທັນທີ, ແຕ່ຖ້າທ່ານກຳລັງສ້າງການຕິດຕັ້ງແບບກຳນົດເອງຂອງທ່ານເອງໂດຍກົງໃສ່ Google Maps API, ມັນມີການອັບເດດງ່າຍໆທີ່ທ່ານສາມາດເຮັດໄດ້ເພື່ອປະຢັດເຄຣດິດ autocomplete ບາງສ່ວນ.
ຟັງຊັນ auto-complete ມາດຕະຖານຈະສົ່ງຄຳຂໍ auto-complete ທຸກໆຄັ້ງທີ່ມີການປ່ຽນແປງໃນການປ້ອນຂໍ້ມູນ. ມັນເປັນໄປໄດ້ທີ່ຈະຫຼຸດຜ່ອນຈຳນວນເຄຣດິດທີ່ໃຊ້ໄດ້ຢ່າງຫຼວງຫຼາຍໂດຍການໃສ່ timeout ເມື່ອການປ້ອນຂໍ້ມູນປ່ຽນແປງ.
ນີ້ແມ່ນຕົວຢ່າງພື້ນຖານຫຼາຍ.
ດັ່ງນັ້ນທຸກໆຄັ້ງທີ່ຜູ້ໃຊ້ເລີ່ມພິມໃນການປ້ອນຂໍ້ມູນ autocomplete ຈະບໍ່ເຮັດວຽກຈົນກ່ວາຈະມີການຊັກຊ້າຊົ່ວຄາວ. ການຊັກຊ້າ 250ms ສາມາດຫຼຸດລົງໄດ້ເພື່ອເຮັດໃຫ້ autocomplete ເຮັດວຽກເລື້ອຍໆຂຶ້ນ. ຖ້າຜູ້ໃຊ້ພິມ "Toronto" ຢ່າງໄວວາ, ຈະມີການເອີ້ນໃຊ້ auto-complete ພຽງແຕ່ຄັ້ງດຽວແທນທີ່ຈະເປັນ 8 ຄັ້ງເມື່ອຜູ້ໃຊ້ມີການຢຸດຊົ່ວຄາວ.
ພວກເຮົາພົບວ່າການກຳນົດເວລາຊັກຊ້າແມ່ນໄດ້ຜົນດີທີ່ສຸດ. ຈຸດສຳຄັນຂອງເລື່ອງນີ້ແມ່ນເພື່ອເຮັດໃຫ້ແນ່ໃຈວ່າສ່ວນຕິດຕໍ່ຜູ້ໃຊ້ສະແດງໃຫ້ເຫັນວ່າກຳລັງມີການຄົ້ນຫາໃນຂະນະທີ່ພວກເຂົາກຳລັງພິມ. ໃນກໍລະນີຂອງພວກເຮົາ ພວກເຮົາໃຊ້ spinner ແບບເຄື່ອນໄຫວ. ວິທີນີ້ຖ້າຜູ້ໃຊ້ພິມຢ່າງໄວວາແລະບໍ່ເຫັນຜົນການຄົ້ນຫາ, spinner ແບບເຄື່ອນໄຫວຈະເຮັດໃຫ້ພວກເຂົາຢຸດລໍຖ້າພຽງພໍທີ່ຈະເຫັນຜົນການຄົ້ນຫາ.
ຄວນສັງເກດວ່າການຕິດຕັ້ງແບບນີ້ແມ່ນສອດຄ່ອງກັບເງື່ອນໄຂການນຳໃຊ້ໃນປະຈຸບັນຂອງພວກເຂົາ. ສິ່ງທີ່ວິທີການນີ້ເຮັດຫຼັກໆແມ່ນການຈຳກັດອັດຕາການສົ່ງຄຳຂໍ autocomplete ອອກໄປຈາກຜູ້ໃຊ້.
ຖ້າທ່ານໃຊ້ໃບອະນຸຍາດ Google ຂອງທ່ານກັບ Scribble Maps API ພວກເຮົາມີການປັບປຸງບາງຢ່າງເຫຼົ່ານີ້ໃຫ້ທັນທີ, ແຕ່ຖ້າທ່ານກຳລັງສ້າງການຕິດຕັ້ງແບບກຳນົດເອງຂອງທ່ານເອງໂດຍກົງໃສ່ Google Maps API, ມັນມີການອັບເດດງ່າຍໆທີ່ທ່ານສາມາດເຮັດໄດ້ເພື່ອປະຢັດເຄຣດິດ autocomplete ບາງສ່ວນ.
ຟັງຊັນ auto-complete ມາດຕະຖານຈະສົ່ງຄຳຂໍ auto-complete ທຸກໆຄັ້ງທີ່ມີການປ່ຽນແປງໃນການປ້ອນຂໍ້ມູນ. ມັນເປັນໄປໄດ້ທີ່ຈະຫຼຸດຜ່ອນຈຳນວນເຄຣດິດທີ່ໃຊ້ໄດ້ຢ່າງຫຼວງຫຼາຍໂດຍການໃສ່ timeout ເມື່ອການປ້ອນຂໍ້ມູນປ່ຽນແປງ.
ນີ້ແມ່ນຕົວຢ່າງພື້ນຖານຫຼາຍ.
var acTimeOut;
textSearchInput.onkeyup = function() {
clearTimeout(acTimeout);
acTimeout = setTimeout(function() {
//put auto-complete calls in here
}, 250);
}
ດັ່ງນັ້ນທຸກໆຄັ້ງທີ່ຜູ້ໃຊ້ເລີ່ມພິມໃນການປ້ອນຂໍ້ມູນ autocomplete ຈະບໍ່ເຮັດວຽກຈົນກ່ວາຈະມີການຊັກຊ້າຊົ່ວຄາວ. ການຊັກຊ້າ 250ms ສາມາດຫຼຸດລົງໄດ້ເພື່ອເຮັດໃຫ້ autocomplete ເຮັດວຽກເລື້ອຍໆຂຶ້ນ. ຖ້າຜູ້ໃຊ້ພິມ "Toronto" ຢ່າງໄວວາ, ຈະມີການເອີ້ນໃຊ້ auto-complete ພຽງແຕ່ຄັ້ງດຽວແທນທີ່ຈະເປັນ 8 ຄັ້ງເມື່ອຜູ້ໃຊ້ມີການຢຸດຊົ່ວຄາວ.
ພວກເຮົາພົບວ່າການກຳນົດເວລາຊັກຊ້າແມ່ນໄດ້ຜົນດີທີ່ສຸດ. ຈຸດສຳຄັນຂອງເລື່ອງນີ້ແມ່ນເພື່ອເຮັດໃຫ້ແນ່ໃຈວ່າສ່ວນຕິດຕໍ່ຜູ້ໃຊ້ສະແດງໃຫ້ເຫັນວ່າກຳລັງມີການຄົ້ນຫາໃນຂະນະທີ່ພວກເຂົາກຳລັງພິມ. ໃນກໍລະນີຂອງພວກເຮົາ ພວກເຮົາໃຊ້ spinner ແບບເຄື່ອນໄຫວ. ວິທີນີ້ຖ້າຜູ້ໃຊ້ພິມຢ່າງໄວວາແລະບໍ່ເຫັນຜົນການຄົ້ນຫາ, spinner ແບບເຄື່ອນໄຫວຈະເຮັດໃຫ້ພວກເຂົາຢຸດລໍຖ້າພຽງພໍທີ່ຈະເຫັນຜົນການຄົ້ນຫາ.
ຄວນສັງເກດວ່າການຕິດຕັ້ງແບບນີ້ແມ່ນສອດຄ່ອງກັບເງື່ອນໄຂການນຳໃຊ້ໃນປະຈຸບັນຂອງພວກເຂົາ. ສິ່ງທີ່ວິທີການນີ້ເຮັດຫຼັກໆແມ່ນການຈຳກັດອັດຕາການສົ່ງຄຳຂໍ autocomplete ອອກໄປຈາກຜູ້ໃຊ້.