{"id":17412,"date":"2025-04-07T06:00:17","date_gmt":"2025-04-07T03:00:17","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/debouncing-neden-hala-onemli\/"},"modified":"2025-04-07T06:00:17","modified_gmt":"2025-04-07T03:00:17","slug":"debouncing-neden-hala-onemli","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/debouncing-neden-hala-onemli\/","title":{"rendered":"Debouncing: Neden Hala \u00d6nemli?"},"content":{"rendered":"

<\/p>\n

Debouncing: Neden Hala \u00d6nemli?<\/p>\n

Merhaba, ben Fatih Soysal. Bu makalede, \u00f6zellikle modern web geli\u015ftirmede performans optimizasyonu i\u00e7in hayati \u00f6nem ta\u015f\u0131yan bir teknik olan debouncing’i (geciktirme) detayl\u0131 olarak ele alaca\u011f\u0131z. \u00d6ncelikle debouncing’in ne oldu\u011funu ve neden hala \u00f6nemli oldu\u011funu a\u00e7\u0131klayaca\u011f\u0131m. Ard\u0131ndan, pratik kullan\u0131m \u00f6rnekleri ve kod \u00f6rnekleriyle konuyu peki\u015ftirece\u011fiz. Son olarak da, debouncing’in performans \u00fczerindeki olumlu etkisini g\u00f6receksiniz.<\/p>\n

Debouncing Nedir?<\/h2>\n

Debouncing, belirli bir s\u00fcre i\u00e7inde ard\u0131\u015f\u0131k olarak tetiklenen bir olay\u0131, yaln\u0131zca belirli bir zaman aral\u0131\u011f\u0131ndan sonra bir kez \u00e7al\u0131\u015ft\u0131rmay\u0131 sa\u011flayan bir tekniktir. \u00d6rne\u011fin, bir kullan\u0131c\u0131 s\u00fcrekli olarak bir arama kutusuna yaz\u0131 yazd\u0131\u011f\u0131nda, her tu\u015fa bas\u0131\u015fta arama yapmak yerine, belirli bir s\u00fcre (\u00f6rne\u011fin 300 milisaniye) bekledikten sonra arama i\u015flemini sadece bir kez ger\u00e7ekle\u015ftiririz. Bu sayede, gereksiz isteklerden ve performans d\u00fc\u015f\u00fc\u015flerinden ka\u00e7\u0131nm\u0131\u015f oluruz.<\/p>\n

Ba\u015fka bir deyi\u015fle, debouncing, h\u0131zl\u0131 ard\u0131\u015f\u0131k olaylar\u0131 tek bir olaya indirgeyerek performans\u0131 art\u0131r\u0131r. Bu, \u00f6zellikle kullan\u0131c\u0131 etkile\u015fimlerine ba\u011fl\u0131 i\u015flemlerde (\u00f6rne\u011fin, arama kutular\u0131, kayd\u0131rma olaylar\u0131) \u00e7ok faydal\u0131d\u0131r. Aksi takdirde, s\u00fcrekli tetiklenen olaylar sunucuya gereksiz y\u00fck bindirebilir ve kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir. Sonu\u00e7ta, daha ak\u0131c\u0131 ve h\u0131zl\u0131 bir web uygulamas\u0131 elde edilir.<\/p>\n

Debouncing Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n

Debouncing’in \u00e7al\u0131\u015fma prensibi olduk\u00e7a basittir. Bir zamanlay\u0131c\u0131 (timer) kullan\u0131l\u0131r ve her olay tetiklendi\u011finde bu zamanlay\u0131c\u0131 s\u0131f\u0131rlan\u0131r. Belirlenen s\u00fcre dolana kadar zamanlay\u0131c\u0131 \u00e7al\u0131\u015fmaya devam eder. S\u00fcre doldu\u011funda, olay yaln\u0131zca bir kez i\u015flenir. Bu sayede, ard\u0131\u015f\u0131k olaylar birle\u015ftirilir ve sadece son olay i\u015flenir.<\/p>\n

\u0130\u015fte JavaScript ile debouncing’i uygulaman\u0131n basit bir \u00f6rne\u011fi:<\/p>\n

\nfunction debounce(func, wait) {\n  let timeout;\n  return function executedFunction(...args) {\n    const later = () => {\n      clearTimeout(timeout);\n      func(...args);\n    };\n    clearTimeout(timeout);\n    timeout = setTimeout(later, wait);\n  };\n}\n\n\/\/ \u00d6rnek kullan\u0131m:\nconst myFunction = () => {\n  console.log('Fonksiyon \u00e7al\u0131\u015ft\u0131!');\n};\n\nconst debouncedFunction = debounce(myFunction, 300); \/\/ 300 milisaniyelik gecikme\n\nwindow.addEventListener('resize', debouncedFunction);\n<\/code><\/pre>\n
Bu kod \u00f6rne\u011finde, debounce<\/code> fonksiyonu, verilen fonksiyonu (func<\/code>) belirtilen s\u00fcre (wait<\/code>) kadar geciktirir.  setTimeout<\/code> fonksiyonu bu gecikmeyi sa\u011flar.  Her olay tetiklendi\u011finde zamanlay\u0131c\u0131 s\u0131f\u0131rlan\u0131r ve s\u00fcre doldu\u011funda fonksiyon sadece bir kere \u00e7al\u0131\u015f\u0131r.<\/p>\n
Debouncing’in Faydalar\u0131<\/h2>\n
Debouncing’in bir\u00e7ok faydas\u0131 vard\u0131r.  En \u00f6nemli faydalar\u0131 \u015funlard\u0131r:<\/p>\n