سحر و جادو در ایجاد میله های جستجوی واکنشی

بیایید فقط به این نکته بپردازیم ، بله؟

یک نوار جستجو را تصور کنید که به عنوان تایپ شما نتیجه می گیرد. بدون اینکه دفع شود ، هر ضربه ای به یک تماس API باعث می شود که سرور شما را سیل کند و اوضاع را کند کند. debouncing فقط محرک های جستجو را تضمین می کند پس از شما برای زمان مشخص تایپ را متوقف می کنید. این یکی از بهترین موارد استفاده برای debouncing است.

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId); // Reset the timer
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// Usage:
const search = debounce((query) => {
  console.log(`Searching for: ${query}`);
}, 300);

search("a"); // Ignored
search("ap"); // Ignored
search("app"); // Only this runs after 300ms

هر کلید کلیدی بازنشانی می کند delay تایمر این عملکرد فقط هنگام تایپ مکث برای 300ms اجرا می شود.

Debouncing در همه جا وقایع تغییر اندازه ، دستگیره های پیمایش ، کلیک بر روی دکمه ها برای جلوگیری از ارسال های مضاعف است.