تاخیر دادن به رویداد keyup در jQuery

تصمیم گرفتم چالش‌هایی که برام پیش میاد رو بنویسم تا دیگران بتونن استفاده کنن

راستش من توسعه دهنده لاراول هستم و زیاد خودم رو درگیر UI نمی‌کنم واسه همین زیاد خودم رو درگیر فرانت اند نکردم، اما خب چند وقتی هست درگیر یه پروژه شخصی شدم و پولی هم ندارم که طراح UI استخدام کنم، بخاطر همین شروع کردم به نوشتن فرانت اند و خلاصه بگذریم

لایو سرچم کار میکنه ولی خیلی فشار میاره رو سرور

برای پروژه‌ام یه لایو سرچ نوشتم که درست کار می‌کنه ولی مشکلی که داره اینه که به ازای فشردن هر کلید یه درخواست جستجو به سرور ارسال می‌کنه و خب اینطوری زیاد جالب نیست.

فرض کنید کاربر می‌خواد کلمه Laravel رو سرچ کنه و اینطوری ۷ تا درخواست بصورت زیر ارسال می‌شه:

• L
• La
• Lar
• Lara
• Larav
• Larave
• Laravel

خب راه حل چیه؟

یه راه حلی که به ذهنم رسید این بود که دکمه برای سرچ بزارم و با فشردن دکمه درخواست برای سرور ارسال بشه، اما خب طراحیم یه جوری بود که دکمه زشتش میکرد.

راه دیگه‌ای که به ذهنم رسید این بود که بین فشرده شدن کلید تا ارسال درخواست یکم تاخیر بدم و اگه دیگه کلیدی فشرده نشد درخواست ارسال بشه.

خود jQuery همچین تابعی نداشت و ناچار مجبور به جستجو شدم و این قطعه کد باحال رو پیدا کردم که مشکلم رو برطرف کرد:

<script>
var delay = (function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();
</script>

و نحوه استفاده‌ش هم بصورت زیره

$('#search-input').keyup(function () {
    $("#search-result").empty();
    delay(function () {
        query = $('#search-result').val();
        if (query.length >= 3) {
            axios.post('/api/search', {
                q: $("#title").val()
            }).then(function (response) {
                console.log(response.data);
                updateSearchResult(response.data);
            }).catch(function (err) {
                console.error(err)
            });
        } else {
            $('#result').hide();
        }
    }, 2000)
});

امیدوارم این مطلب براتون مفید واقع شده باشه