امروز مطلب پایین رو توی کانال CodersZone دیدم و حس کردم بد نباشه یه مطلب مفید آموزشی در موردش بنویسم.
یکی از موارد خیلی خوبی که بنظر من هم لازمه هر وبسایت فروشگاهی هستش، همین استفاده از باکسهای جستجو با قابلیت پیشنهاد مورد جستجو شده توسط کاربر یا همون امکان (Auto Suggestion) هستش.
وجود همچین آپشنی باعث کاربرپسندتر شدن وبسایت و جلب رضایت بیشتر کاربر به دلیل افزایش سرعت در رسیدن به آیتم مورد نظر میشه و در نهایت شما UX بهتری رو خلق خواهید کرد.
اما هر مزیتی معمولا یکسری ضعفها و معایب هم دنبالش هست و این قابلیت هم از این قاعده مستنثنی نیست.
فرض کنید با جی کوئری یک باکس جستجو ساختید که به ازای هر بار فشرده شدن کلید روی کیبورد و تایپ یک کاراکتر توسط کاربر، درخواستی به سرور ارسال میشه و یک کوئری از دیتابیس برای پیدا کردن جنس یا محصولی که حاوی اون حرف و در ادامه کلمه وارد شده هست میگرده و یک سری نتیجه به یوزر برای تکمیل یا ادامه جستجو نشون داده میشه.
استفاده از این حالت جستجو معمولا برای سایتهای کوچیک و متوسط زیاد مشکل خاصی رو ایجاد نمیکنه ولی توی سایتهای بزرگتر با کاربرهای بیشتر میتونه فشار زیادی رو متحمل سرور کنه.
مثلا برای جستجوی عبارت Gaming Keyboard بصورت عادی 15 درخواست برای سرور ارسال میشه و 15 کوئری از دیتابیس گرفته میشه که این برفرض جستجوی 1میلیون بار این عبارت، میشه 15 میلیون درخواست! این درحالی هستش که با اضافه کردن چند خط کد ساده و اضافه کردن یک تاخیر کوتاه در سرچ تا زمانی که کاربر در حال تایپ هستش میشه این میزان درخواست رو به 2 میلیون درخواست کاهش داد! و این تفاوت خیلی خیلی چشمگیری توی مصرف منابع سخت افزاری و عملکرد سرور بوجود میاره.
برای اضافه کردن تاخیر به کادرهای جستجو کافیه کدهای زیر رو اضافه کنید به جایی که عملیات ایجکسی قرار هست انجام بشه:
var timer, delay = 1000;
$('input').bind('keydown blur change', function(e) {
var _this = $(this);
clearTimeout(timer);
timer = setTimeout(function() {
// AJAX CODE HERE
}, delay );
});
کد بالا باعث میشه که اگر کاربر یک ثانیه دست از تایپ کشید بعد درخواست بصورت ایجکس به سرور ارسال بشه و نه به ازای هر بار تایپ حروف.
امیدوارم خوشتون اومده باشه.
لینکهای مفید:
https://schier.co/blog/2014/12/08/wait-for-user-to-stop-typing-using-javascript.html
نمونه کد اجرا شده:
