Debounce و Throttle چیست؟ مقایسه کامل برای بهبود پرفورمنس در فرانت‌اند (JavaScript + Next.js)

در پروژه‌های فرانت‌اند، یکی از مهم‌ترین چالش‌ها این است که رویدادهای پرتکرار (مثل scroll، resize یا keypress) باعث کندی، لگ، مصرف بالای CPU و حتی افت FPS بشوند. اینجا است که دو ابزار کلاسیک و بسیار کاربردی وارد میدان می‌شوند: Debounce و Throttle.

در این مقاله، به‌صورت دقیق، حرفه‌ای و با مثال‌های واقعی از JavaScript و Next.js بررسی می‌کنیم که:

Debounce چیست و چه زمانی باید از آن استفاده کنیم
Throttle چیست و چه زمانی بهترین انتخاب است
تفاوت‌های عملی و مفهومی آن‌ها چیست
چگونه پرفورمنس UI را قبل و بعد از استفاده به‌صورت واقعی اندازه بگیریم
چرا نیازی به state managementهایی مثل Redux، Context یا Zustand نداریم

Debounce چیست؟

Debounce به این معناست که تا زمانی که یک رویداد پشت‌سرهم تکرار می‌شود، هیچ تابعی اجرا نشود. فقط زمانی تابع اجرا می‌شود که کاربر برای مدت مشخصی (مثلاً ۳۰۰ میلی‌ثانیه) فعالیتش را متوقف کند.

مثال رایج آن تایپ در input سرچ است؛ اگر بدون debounce پیاده‌سازی شود، برای هر کاراکتر یک درخواست API ارسال خواهد شد که به‌شدت به پرفورمنس آسیب می‌زند.

Throttle چیست؟

Throttle یعنی محدود کردن اجرای تابع به یک بازه زمانی مشخص. حتی اگر رویداد صدها بار اجرا شود، تابع فقط هر X میلی‌ثانیه یک‌بار اجرا خواهد شد.

این تکنیک بیشتر برای رویدادهایی مثل scroll و resize استفاده می‌شود که تداوم دارند و نمی‌خواهیم UI قفل شود.

تفاوت Debounce و Throttle

ویژگی	Debounce	Throttle
زمان اجرا	بعد از پایان فعالیت کاربر	در بازه‌های زمانی ثابت
کاربرد رایج	Search، autocomplete	Scroll، resize
رفتار	صبر می‌کند تا کاربر متوقف شود	سرعت اجرا را کنترل می‌کند

پیاده‌سازی Debounce در JavaScript


function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

پیاده‌سازی Throttle در JavaScript


function throttle(fn, delay) {
  let lastCall = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      fn.apply(this, args);
    }
  };
}

استفاده از Debounce و Throttle در Next.js با Custom Hook

در پروژه‌های Next.js، مدیریت رویدادهای پرتکرار کاملاً در سمت کلاینت انجام می‌شود. برای پیاده‌سازی تمیز، قابل استفاده مجدد و حرفه‌ای، بهترین راه این است که منطق debounce و throttle را داخل Custom Hook قرار دهیم.

این کار باعث می‌شود:

کد خواناتر شود
منطق پرفورمنسی از UI جدا شود
نیازی به هیچ state management مثل Redux، Context یا Zustand نداشته باشیم

پیاده‌سازی Custom Hook برای Debounce


"use client";
import { useState, useEffect } from "react";
export function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    return () => clearTimeout(timer);
  }, [value, delay]);
  return debouncedValue;
}

استفاده از useDebounce در کامپوننت Next.js


"use client";
import { useState, useEffect } from "react";
import { useDebounce } from "./useDebounce";
export default function SearchBox() {
  const [search, setSearch] = useState("");
  const debouncedSearch = useDebounce(search, 400);
  useEffect(() => {
    if (debouncedSearch) {
      console.log("API call with:", debouncedSearch);
    }
  }, [debouncedSearch]);
  return (
    <input
      value={search}
      onChange={(e) => setSearch(e.target.value)}
      placeholder="Search..."
    />
  );
}

پیاده‌سازی Custom Hook برای Throttle


"use client";
import { useRef } from "react";
export function useThrottle(callback, delay) {
  const lastCall = useRef(0);
  return (...args) => {
    const now = Date.now();
    if (now - lastCall.current >= delay) {
      lastCall.current = now;
      callback(...args);
    }
  };
}

استفاده از useThrottle در رویداد Scroll


"use client";
import { useEffect } from "react";
import { useThrottle } from "./useThrottle";
export default function ScrollTracker() {
  const throttledScroll = useThrottle(() => {
    console.log("Scroll Y:", window.scrollY);
  }, 200);
  useEffect(() => {
    window.addEventListener("scroll", throttledScroll);
    return () => window.removeEventListener("scroll", throttledScroll);
  }, [throttledScroll]);
  return <div style={{ height: "200vh" }}>Scroll down...</div>;
}

در این پیاده‌سازی، بدون استفاده از هیچ store یا context اضافی، توانستیم کنترل دقیقی روی رویدادهای پرتکرار داشته باشیم و پرفورمنس رابط کاربری را به شکل محسوسی بهبود دهیم.

چرا Debounce و Throttle پرفورمنس را بهتر می‌کنند؟

کاهش تعداد execution توابع
آزاد شدن main thread
جلوگیری از UI lag
کاهش Reflow و Repaint
مصرف کمتر CPU و باتری (مخصوص موبایل)

آنالیز پرفورمنس: قبل و بعد

با استفاده از تب Performance در Chrome DevTools می‌توان رفتار برنامه را قبل و بعد از debounce/throttle به‌وضوح مقایسه کرد.

قبل:

صدها event در هر ثانیه
main thread شلوغ
افت FPS و لگ

بعد:

کاهش execution از صدها بار به چند بار
timeline خلوت‌تر
FPS پایدار
کاهش مصرف CPU

نکات مهم برای پروژه‌های واقعی

استفاده بیش از حد از debounce/throttle خودش anti-pattern است
delay باید بر اساس تجربه کاربری تنظیم شود
برای این سناریوها نیازی به Redux، Context یا Zustand نیست
useState و useEffect کاملاً کافی هستند

جمع‌بندی

Debounce و Throttle از ساده‌ترین و مؤثرترین ابزارها برای کنترل رویدادهای پرتکرار و افزایش پرفورمنس فرانت‌اند هستند. با JavaScript و Next.js می‌توان آن‌ها را بدون هیچ وابستگی اضافه‌ای پیاده‌سازی کرد و تجربه کاربری بهتری ساخت.

Debounce vs Throttle: A Complete Guide to Frontend Performance Optimization (JavaScript + Next.js)

🌗 Building an Automatic Dark Mode with JavaScript and React

From Browser Request to Rendered Page: The Hidden Journey of Frontend and Backend

My Unusual Journey: From Video Editing to Programming! 🚀

Hello World :)

Debounce vs Throttle: A Complete Guide to Frontend Performance Optimization (JavaScript + Next.js)

🌗 Building an Automatic Dark Mode with JavaScript and React

From Browser Request to Rendered Page: The Hidden Journey of Frontend and Backend

My Unusual Journey: From Video Editing to Programming! 🚀

Hello World :)