JavaScript’te Debounce Tekni\u011fi: Performans\u0131 Artt\u0131rman\u0131n Yolu<\/p>\n
Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle JavaScript’te s\u0131k\u00e7a kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z performans sorunlar\u0131ndan birini, olaylar\u0131n \u00e7ok s\u0131k tetiklenmesi sorununu ele alaca\u011f\u0131z. \u00d6zellikle input alanlar\u0131nda, kayd\u0131rma olaylar\u0131nda veya arama kutular\u0131nda, kullan\u0131c\u0131 etkile\u015fimi sonucu s\u00fcrekli tetiklenen fonksiyonlar, uygulaman\u0131n yava\u015flamas\u0131na ve gereksiz i\u015flem y\u00fck\u00fcne sebep olabilir. \u0130\u015fte bu noktada devreye debounce<\/strong> tekni\u011fi giriyor.<\/p>\n Debounce, belirli bir s\u00fcre i\u00e7inde birden fazla kez tetiklenen bir fonksiyonun sadece son \u00e7a\u011fr\u0131s\u0131n\u0131 \u00e7al\u0131\u015ft\u0131ran bir tekniktir. Basit\u00e7e anlatmak gerekirse, belirli bir zaman dilimi i\u00e7inde fonksiyon birden \u00e7ok kez \u00e7a\u011fr\u0131l\u0131rsa, sadece son \u00e7a\u011fr\u0131 i\u015flenir ve di\u011ferleri yoksay\u0131l\u0131r. Bu sayede uygulaman\u0131zda gereksiz i\u015flem y\u00fck\u00fc azal\u0131r ve performans art\u0131\u015f\u0131 g\u00f6zlemlenir.<\/p>\n Debounce’un \u00e7al\u0131\u015fma mant\u0131\u011f\u0131 olduk\u00e7a basittir. Bir zamanlay\u0131c\u0131 (timer) kullan\u0131l\u0131r. Fonksiyon \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, zamanlay\u0131c\u0131 ba\u015flat\u0131l\u0131r. E\u011fer fonksiyon belirli bir s\u00fcre i\u00e7inde tekrar \u00e7a\u011fr\u0131l\u0131rsa, zamanlay\u0131c\u0131 s\u0131f\u0131rlan\u0131r ve yeni bir s\u00fcre ba\u015flar. Zamanlay\u0131c\u0131 s\u00fcresi doldu\u011funda, fonksiyon sadece bir kez \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r. <\/p>\n Bu tekni\u011fi a\u00e7\u0131klamak i\u00e7in bir \u00f6rnek verelim. Kullan\u0131c\u0131n\u0131n bir arama kutusuna yazd\u0131\u011f\u0131 her harf i\u00e7in bir arama sorgusu g\u00f6ndermek yerine, debounce kullanarak, kullan\u0131c\u0131n\u0131n yazmay\u0131 bitirmesinden sonra (\u00f6rne\u011fin 300 milisaniye sonra) tek bir arama sorgusu g\u00f6nderilebilir. Bu, sunucu \u00fczerindeki y\u00fck\u00fc azalt\u0131r ve kullan\u0131c\u0131 deneyimini iyile\u015ftirir.<\/p>\n \u0130\u015fte JavaScript ile debounce fonksiyonunun basit bir \u00f6rne\u011fi:<\/p>\n Bu kodda, Yukar\u0131daki \u00f6rne\u011fi anlamak i\u00e7in, web sitemi<\/a> ziyaret edebilir ve daha fazla bilgi edinebilirsiniz. Ayr\u0131ca, daha geli\u015fmi\u015f debounce uygulamalar\u0131 i\u00e7in bu makaleye<\/a> g\u00f6z atabilirsiniz.<\/p>\n Debounce tekni\u011fi, \u00f6zellikle y\u00fcksek frekansl\u0131 olaylarla \u00e7al\u0131\u015fan uygulamalarda performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir. Kullan\u0131m\u0131 olduk\u00e7a basit olmas\u0131na ra\u011fmen, performans optimizasyonunda b\u00fcy\u00fck fark yarat\u0131r. Bu tekni\u011fi \u00f6\u011frenerek, daha h\u0131zl\u0131 ve daha verimli JavaScript uygulamalar\u0131 geli\u015ftirebilirsiniz. Umar\u0131m bu makale size yard\u0131mc\u0131 olmu\u015ftur!<\/p>\n #Etiketler: debounce, javascript, performans, optimizasyon, olay i\u015fleme, zamanlay\u0131c\u0131, setTimeout, clearTimeout, fonksiyon, programlama, web geli\u015ftirmeDebounce Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n
Debounce Uygulamas\u0131<\/h2>\n
\nfunction debounce(func, delay) {\n let timeoutId;\n return function(...args) {\n clearTimeout(timeoutId);\n timeoutId = setTimeout(() => {\n func.apply(this, args);\n }, delay);\n };\n}\n\n\/\/ \u00d6rnek kullan\u0131m:\nfunction myFunction(e) {\n console.log(\"Fonksiyon \u00e7al\u0131\u015ft\u0131:\", e.target.value);\n}\n\nconst debouncedFunction = debounce(myFunction, 300); \/\/ 300 milisaniyelik bekleme s\u00fcresi\n\ndocument.getElementById(\"myInput\").addEventListener(\"input\", debouncedFunction);\n<\/code><\/pre>\ndebounce<\/code> fonksiyonu, verilen fonksiyonu (func<\/code>) ve bekleme s\u00fcresini (delay<\/code>) al\u0131r. setTimeout<\/code> fonksiyonu kullan\u0131larak, fonksiyonun belirtilen s\u00fcre sonra \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131 sa\u011flan\u0131r. clearTimeout<\/code> fonksiyonu ise, fonksiyon daha \u00f6nce \u00e7a\u011fr\u0131lm\u0131\u015fsa, mevcut zamanlay\u0131c\u0131n\u0131n iptal edilmesini sa\u011flar. Bu sayede, sadece son \u00e7a\u011fr\u0131 i\u015flenir.<\/p>\nSonu\u00e7<\/h2>\n
\n<\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript’te Debounce Tekni\u011fi: Performans\u0131 Artt\u0131rman\u0131n Yolu Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle JavaScript’te s\u0131k\u00e7a kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z performans sorunlar\u0131ndan…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-12896","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n