Modern web uygulamalar\u0131, kullan\u0131c\u0131 etkile\u015fimini art\u0131rmak ve zengin bir deneyim sunmak amac\u0131yla s\u00fcrekli olarak \u00e7e\u015fitli etkinlikleri (event) dinler ve bunlara tepki verir. Klavye giri\u015fleri, fare hareketleri, kayd\u0131rma olaylar\u0131, pencere boyutland\u0131rma gibi bir\u00e7ok olay, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn dinamik ve etkile\u015fimli olmas\u0131n\u0131 sa\u011flar. Ancak, bu olaylar\u0131n \u00e7ok s\u0131k tetiklenmesi durumunda ciddi performans sorunlar\u0131 ortaya \u00e7\u0131kabilir. \u00d6rne\u011fin, bir arama kutusuna her tu\u015f vuru\u015funda bir API iste\u011fi g\u00f6ndermek, gereksiz a\u011f trafi\u011fi ve sunucu y\u00fck\u00fc yaratabilir. Benzer \u015fekilde, bir kayd\u0131rma olay\u0131nda her piksel hareketinde karma\u015f\u0131k bir hesaplama yapmak, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn tak\u0131lmas\u0131na veya yava\u015flamas\u0131na neden olabilir.<\/p>\n
\u0130\u015fte bu noktada “throttling” (k\u0131s\u0131tlama) ve “debouncing” (geciktirme\/yava\u015flatma) teknikleri devreye girer. Bu iki g\u00fc\u00e7l\u00fc kavram, etkinlikleri daha verimli bir \u015fekilde y\u00f6neterek hem uygulama performans\u0131n\u0131 art\u0131r\u0131r hem de kullan\u0131c\u0131lara daha ak\u0131c\u0131 bir deneyim sunar. Vue.js gibi reaktif bir framework ile \u00e7al\u0131\u015f\u0131rken, bu teknikleri do\u011fru bir \u015fekilde uygulamak, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda kritik \u00f6neme sahiptir. Bu makalede, throttling ve debouncing kavramlar\u0131n\u0131 derinlemesine inceleyecek, ne zaman ve neden kullan\u0131ld\u0131klar\u0131n\u0131 a\u00e7\u0131klayacak, ve Lodash k\u00fct\u00fcphanesini kullanarak Vue.js uygulamalar\u0131nda nas\u0131l etkin bir \u015fekilde uygulayaca\u011f\u0131m\u0131z\u0131 detayl\u0131 kod \u00f6rnekleriyle g\u00f6sterece\u011fiz.<\/p>\n
Web uygulamalar\u0131nda s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan ve kontrol edilmedi\u011finde sorunlara yol a\u00e7an baz\u0131 etkinlik t\u00fcrleri vard\u0131r. Bu etkinlikler, genellikle kullan\u0131c\u0131 aray\u00fcz\u00fcyle yo\u011fun etkile\u015fim gerektiren senaryolarda ortaya \u00e7\u0131kar.<\/p>\n
* Bu etkinliklerin kontrols\u00fcz bir \u015fekilde i\u015flenmesi, bir dizi olumsuz sonuca yol a\u00e7abilir: Throttling ve debouncing, bu sorunlar\u0131 \u00e7\u00f6zmek i\u00e7in tasarlanm\u0131\u015f stratejilerdir. \u015eimdi bu iki tekni\u011fi ayr\u0131 ayr\u0131 inceleyelim.<\/p>\n Debouncing, belirli bir etkinlik tetiklenmeyi b\u0131rakt\u0131\u011f\u0131nda, belirli bir s\u00fcre sonra i\u015flevin yaln\u0131zca bir kez \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131n\u0131 sa\u011flayan bir tekniktir. Amac\u0131, h\u0131zl\u0131 ve ard\u0131\u015f\u0131k olarak tetiklenen bir dizi olay\u0131 tek bir olaya d\u00f6n\u00fc\u015ft\u00fcrmektir.<\/p>\n Debouncing, bir etkinlik belirli bir s\u00fcre boyunca tekrar tetiklenmedi\u011finde, ilgili i\u015flevin yaln\u0131zca bir kez y\u00fcr\u00fct\u00fclmesini garanti eder. E\u011fer s\u00fcre dolmadan etkinlik tekrar tetiklenirse, \u00f6nceki say\u0131m s\u0131f\u0131rlan\u0131r ve yeni bir say\u0131m ba\u015flar. Bu, kullan\u0131c\u0131n\u0131n eylemi tamamlamas\u0131n\u0131 bekleyip, ard\u0131ndan tek bir i\u015flem yapmaya benzer.<\/p>\n Analoji:<\/strong> Bir asans\u00f6r\u00fcn kap\u0131 kapanma d\u00fc\u011fmesini d\u00fc\u015f\u00fcn\u00fcn. D\u00fc\u011fmeye her bas\u0131ld\u0131\u011f\u0131nda, kap\u0131n\u0131n kapanmas\u0131 i\u00e7in geri say\u0131m yeniden ba\u015flar. Ancak, kimse d\u00fc\u011fmeye basmad\u0131\u011f\u0131nda belirli bir s\u00fcre sonra kap\u0131lar kapan\u0131r. Debouncing tam olarak bu mant\u0131kla \u00e7al\u0131\u015f\u0131r.<\/p>\n Debouncing, genellikle kullan\u0131c\u0131n\u0131n bir dizi eylemi tamamlamas\u0131n\u0131 bekleyip, ard\u0131ndan bu eylemlerin sonucunu i\u015flemek istedi\u011finiz durumlarda tercih edilir. Lodash, JavaScript i\u00e7in pop\u00fcler bir yard\u0131mc\u0131 program k\u00fct\u00fcphanesidir ve \u00d6ncelikle Lodash’i projenize dahil etmeniz gerekir:<\/p>\n Ard\u0131ndan, Vue.js bile\u015feninizde kullanabilirsiniz.<\/p>\n \u00d6rnek 1: Basit Arama Kutusu<\/strong><\/p>\n Aranan Kelime: {{ displayedSearchText }}<\/p>\n Aran\u0131yor...<\/p>\n <\/div>\n<\/template>\n\ninput<\/code> Etkinlikleri:<\/strong> Arama \u00e7ubuklar\u0131, metin alanlar\u0131 veya di\u011fer form giri\u015flerinde her tu\u015f vuru\u015funda veya giri\u015f de\u011fi\u015fikli\u011finde tetiklenir. \u00d6rne\u011fin, bir arama kutusuna “vuejs” yazarken, ‘v’, ‘u’, ‘e’, ‘j’, ‘s’ i\u00e7in ayr\u0131 ayr\u0131 input<\/code> etkinlikleri tetiklenir.
\n* scroll<\/code> Etkinlikleri:<\/strong> Kullan\u0131c\u0131 bir sayfay\u0131 veya belirli bir \u00f6\u011feyi kayd\u0131rd\u0131\u011f\u0131nda tetiklenir. Sonsuz kayd\u0131rma (infinite scroll), paralaks efektleri veya kayd\u0131rma konumuna g\u00f6re UI g\u00fcncellemeleri gibi \u00f6zelliklerde yo\u011fun olarak kullan\u0131l\u0131r. Bu etkinlik, saniyede onlarca hatta y\u00fczlerce kez tetiklenebilir.
\n* resize<\/code> Etkinlikleri:<\/strong> Taray\u0131c\u0131 penceresinin veya belirli bir \u00f6\u011fenin boyutu de\u011fi\u015ftirildi\u011finde tetiklenir. Duyarl\u0131 tasar\u0131m (responsive design) d\u00fczenlemeleri, tuval (canvas) boyutland\u0131rma veya grafiklerin yeniden \u00e7izilmesi gibi durumlarda kullan\u0131l\u0131r. Pencere s\u00fcr\u00fcklenerek boyutland\u0131r\u0131l\u0131rken s\u00fcrekli tetiklenir.
\n* mousemove<\/code> Etkinlikleri:<\/strong> Fare bir \u00f6\u011fe \u00fczerinde hareket ettirildi\u011finde tetiklenir. S\u00fcr\u00fckle-b\u0131rak (drag-and-drop) i\u015flevleri, \u00e7izim ara\u00e7lar\u0131 veya fare konumuna ba\u011fl\u0131 olarak UI g\u00fcncellemeleri gibi senaryolarda kullan\u0131l\u0131r. \u00c7ok hassas bir \u015fekilde, her piksel hareketinde tetiklenebilir.
\n* keyup<\/code>\/keydown<\/code> Etkinlikleri:<\/strong> Klavye tu\u015flar\u0131na bas\u0131ld\u0131\u011f\u0131nda veya b\u0131rak\u0131ld\u0131\u011f\u0131nda tetiklenir. Otomatik kaydetme, ger\u00e7ek zamanl\u0131 do\u011frulama veya klavye k\u0131sayollar\u0131 gibi \u00f6zelliklerde kullan\u0131l\u0131r.<\/p>\nKontrol Edilmeyen Etkinliklerin Sonu\u00e7lar\u0131<\/h3>\n
\n* Performans D\u00fc\u015f\u00fc\u015f\u00fc:<\/strong> Her etkinlik tetiklendi\u011finde a\u011f\u0131r hesaplamalar veya DOM manip\u00fclasyonlar\u0131 yap\u0131lmas\u0131, uygulaman\u0131n yava\u015flamas\u0131na, tak\u0131lmas\u0131na ve hatta donmas\u0131na neden olabilir. Kullan\u0131c\u0131 aray\u00fcz\u00fc tepkisiz hale gelebilir.
\n* Y\u00fcksek CPU\/Bellek Kullan\u0131m\u0131:<\/strong> S\u00fcrekli \u00e7al\u0131\u015fan i\u015flevler ve yeniden \u00e7izimler, i\u015flemci ve bellek kaynaklar\u0131n\u0131 a\u015f\u0131r\u0131 derecede t\u00fcketebilir, bu da \u00f6zellikle mobil cihazlarda veya d\u00fc\u015f\u00fck donan\u0131ml\u0131 sistemlerde k\u00f6t\u00fc bir deneyime yol a\u00e7ar.
\n* Gereksiz A\u011f \u0130stekleri:<\/strong> Arama \u00e7ubu\u011fu \u00f6rne\u011finde oldu\u011fu gibi, her tu\u015f vuru\u015funda bir API iste\u011fi g\u00f6ndermek, sunucu \u00fczerinde gereksiz y\u00fck olu\u015fturur, bant geni\u015fli\u011fini t\u00fcketir ve kullan\u0131c\u0131n\u0131n veri plan\u0131n\u0131 h\u0131zla bitirebilir.
\n* K\u00f6t\u00fc Kullan\u0131c\u0131 Deneyimi:<\/strong> Yava\u015f ve tepkisiz bir uygulama, kullan\u0131c\u0131lar\u0131n hayal k\u0131r\u0131kl\u0131\u011f\u0131na u\u011framas\u0131na ve uygulamay\u0131 terk etmelerine neden olabilir. Kullan\u0131c\u0131lar, h\u0131zl\u0131 ve ak\u0131c\u0131 bir deneyim beklerler.<\/p>\nDebouncing: Etkinlikleri Geciktirme<\/h2>\n
Debouncing Nedir?<\/h3>\n
Ne Zaman Debouncing Kullan\u0131l\u0131r?<\/h3>\n
\n* Arama Giri\u015f Alanlar\u0131:<\/strong> Kullan\u0131c\u0131 bir arama kutusuna yazarken, her tu\u015f vuru\u015funda API iste\u011fi g\u00f6ndermek yerine, kullan\u0131c\u0131 yazmay\u0131 b\u0131rakt\u0131\u011f\u0131nda (\u00f6rne\u011fin 300-500ms sonra) tek bir arama iste\u011fi g\u00f6ndermek i\u00e7in kullan\u0131l\u0131r.
\n* Ger\u00e7ek Zamanl\u0131 Form Do\u011frulama:<\/strong> Bir form alan\u0131na veri girilirken, her tu\u015f vuru\u015funda do\u011frulama yapmak yerine, kullan\u0131c\u0131 yazmay\u0131 durdurdu\u011funda do\u011frulama yapmak daha verimlidir.
\n* Otomatik Kaydetme \u00d6zellikleri:<\/strong> Bir metin d\u00fczenleyicide kullan\u0131c\u0131 de\u011fi\u015fiklikler yaparken, her de\u011fi\u015fikli\u011fi an\u0131nda kaydetmek yerine, kullan\u0131c\u0131n\u0131n bir s\u00fcre i\u015flem yapmad\u0131\u011f\u0131nda otomatik olarak kaydetmek i\u00e7in idealdir.
\n* Pencere Boyutland\u0131rma (Resize):<\/strong> Pencere boyutu de\u011fi\u015ftirildi\u011finde, d\u00fczeni yeniden hesaplamak veya karma\u015f\u0131k grafikler \u00e7izmek genellikle maliyetlidir. Debouncing ile, kullan\u0131c\u0131 pencere boyutland\u0131rmay\u0131 tamamlad\u0131\u011f\u0131nda tek bir yeniden boyutland\u0131rma i\u015flemi tetiklenebilir.<\/p>\nLodash ile Debouncing Uygulamas\u0131<\/h3>\n
_.debounce<\/code> i\u015flevi ile debouncing uygulamas\u0131n\u0131 son derece kolayla\u015ft\u0131r\u0131r.<\/p>\nnpm install lodash\nveya<\/h2>\nyarn add lodash<\/code><\/pre>\n
\n Debouncing ile Arama<\/h2>\n \n