mehmetduran.com - Paylaşmak Güzeldir...
jQuery Ajax ile Filtreleme İşlemlerinde Zamanlama Kullanma
Bu yazımda jQuery Ajax ile filtreleme işlemlerinde zamanlama olayından bahsedeceğim. jQuery ile hazırlanan birçok filtreleme (örneğin: otomatik tamamlama uygulaması) işleminde veriler elde edilirken bu yöntemin veya buna benzer diğer yöntemlerin kullanılması gerekmekte. Filtreleme işlemi için kullanıcıdan veriler alınır ve bu verilere göre filtreleme yapılır. Ancak kullanıcının her veri girişinde (klavye tuşuna her basışında) Ajax ile filtreleme yapmak hem işleri karıştırabilir (ardı ardına yapılacak Ajax isteklerinin bitiş süreleri farklı olabilir) hem de sunucuyu gereksiz yere yorabilir. Bunu daha mantıklı yapmak için zamanlama kullanabiliriz. Şimdi bunu nasıl yapabileceğimize bakalım.

Kullanıcılar bu tür alanları kullanırken veri alanlarına verileri kısa zaman aralıklarında girerler (orta hızda klavye kullananlar 0.1 ms ile 0.5 ms arasında). Bunun için filtreleme işlemlerini kullanıcının veri girdiği her seferde değil de veri girip makul bir süre geçtikten sonra Ajax isteğini yapmakta fayda var. Böylece her veri girişinde Ajax isteğinden kurtulup, bu Ajax isteklerinin farklı bitiş sürelerine sahip olmasından kaynaklanacak aksaklıkları önlemiş oluruz. Ayrıca sunucuyu da gereksiz yere yormamış oluruz. Şimdi bu anlattıklarımı örnek ile görelim.

// Zamanlama yapan fonksiyonumuz
var YazKontrol = function() {
  var timer = 0;
  return function(fn, ms) {
    clearTimeout(timer);
    timer = setTimeout(fn, ms);
  }
} ();
 
 
// jQuery ile Kullanımı
$(function() {
  $("#kontrol").keyup(function() {
    YazKontrol(function() {
      VeriAl(); // verileri alan fonksiyon
    }, 500); // Tuşa basıldıktan sonra 500 ms geçmiş ise verilier alınıyor
  });
});

Yazacağımız kodlar bu şekilde. Bu kodları kullanarak hazırladığım örneği ise buradan görebilirsiniz.

İyi Çalışmalar.
Mehmet Duran 05 Şubat Cuma 2010 21 21512 4,5
jQuery Javascript Ajax Jquery Zaman Filtre Tuşlar Klavye
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Asp.net'te Accordion Uygulamasını Veritabanı ile Kullanma Jquery ile Tab Şeklinde Menü Hazırlama Asp.net ile Ziyaretçi Bilgileri Jquery ile Dropdownlist Üzerinde Ekleme ve Eleman Aktifleştirme İşlemi Jquery ile Basit Birkaç Örnek Uygulama (Karakter Saydırma)
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Kemal 05 Şubat Cuma 2010 20:32 #1
hocam tamam da kodları bu şekilde nereye yazacağız verial() fornksiyonu ne iş yapar ?
Mehmet Duran 05 Şubat Cuma 2010 20:42 #2
Merhaba. Kodları hangi sayfada kullanacaksan script tagları arasına veya bir script dosyası içerisine yazabilirsin. VeriAl() fonksiyonu ise kod bölümünde de yazdığı gibi verileri alan fonksiyondur. Verileri alma kodunu yazmadım. Çünkü yazımın asıl amacı zamanlama konusu. Ayrıca veri çekme işlemi için farklı yollar mevcut.
huseyin 07 Şubat Pazar 2010 16:59 #3
Merhaba.Jquery ile zamanlama demişken,bir tab menu yapıyorum mouse ile taba gelindiğinde ona ait alanı gösteriyorum.Ama tab ların üzerinden hızlı hızlı geçince o div leride açmış oluyorum.Yani jquery içindeki açık olan divi kapatma koduna gelmeden diğerleri de açılmış oluyor.Orta bir yavaşlıkta yapınca sorun yok.(Bu sırada sizin sitenizdeki tab uygulamaların hepsine baktım.)Mousedown-mouseover ile de oluyor.Yani kodun son satırına gelmedem başka kodun çalıştırılmamasını sağlamlıyım.Nasıyapılır?
Mehmet Duran 07 Şubat Pazar 2010 23:47 #4
Merhaba. Bu sorunu ben de farkettim. Çözüm için jQuery içerisinde tanımlı olan queue özelliği ve stop() fonksiyonu çözüm olabilir. Bunların dışında bu sorunun oluşmasını engellemek için alanları gösterme-kapatma işlemleri için süresiz işlem kullanabiliriz. Böylece bu sorun olmayabilir ama görsellikten feragat etmiş oluruz. Bunun dışında alanları açıp kapatma dışında içeriklerini alıp belli bir alana yazdırarak da işlem yapabiliriz.
AHMET YILMAZ 11 Şubat Perşembe 2010 19:13 #5
Hocam paylaşımın için teşekkürler.Benim sorum şu 1 'den 20'ye kadar sayılar içinden en büyük çift sayı ve en büyük tek sayıyı nasıl bulabilirim.
Mehmet Duran 11 Şubat Perşembe 2010 22:45 #6
Bu tür işler için birçok algoritma var. En kolay yöntemi ile sırayla tüm elemanları for döngüsü ile gezersin. Bulmak istediğin her eleman için bir değişken tanımlayıp sırayla tüm verileri birbiri ile karşılaştırıp büyük olanı değişken atarsın. Döngü bittiğinde değişken en büyük değeri verir. Sayının tek veya çift olması durumunu da mod işlemini kullanarak yapabilirsin.
huseyin 12 Şubat Cuma 2010 00:25 #7
Tekrar merhaba.Yani jqueryajax kullanmalıyım.Peki o tab menuleri gösterirken altta bulunan divleri aşağı kaydırarak değil de kariyer.net deki gibi alttaki alanın üzerine açmayı nasıl yapabilirim? İlgilendiğin için teşekkürler.
Mehmet Duran 12 Şubat Cuma 2010 00:47 #8
Oradaki mantık menülerin üstüne gelindiğinde açılması gereken (gizli) alanın görünme durumunu değiştirerek (show() metodu gibi) alanın açılması sağlanıyor ve açık olan alan varsa o alan kapatılıyor (hide() metodu gibi). O alanların position bilgileri ile oynayarak ve css ayarları değiştirilerek diğer elementlerin üstünde açılması sağlanıyor. Bunun için css bilgisi gerekiyor.
Erman KIZIL 12 Şubat Cuma 2010 15:29 #9
Hocam gelen sonucu açılır menuye nasıl basıyorsunuz. Kısaca aşağı açılır menuyu nasıl oluşturuyorsunuz.Yanda çıkan kaydırma çubuğu kendisi mi çıkıyor.Paylaşım için teşekkürler.
Mehmet Duran 12 Şubat Cuma 2010 16:02 #10
Burada açılır menü değil de textbox alanına ait otomatik tamamlama bölümü var. Burada verileri konumlandırmak için css ile elementin position özelliğini değiştiriyoruz. Yanda çıkan kaydırma çubuğunu ise yine css'in overflow (auto, scroll) özelliği ile yapabiliyoruz. Örneğin kaynak koduna bakarak bu söylediklerimi görebilirsin.
huseyin 12 Şubat Cuma 2010 22:27 #11
Şu anda aslında position bilgileri önemli değil de(yani nerede açılacağı önemli değil)sadece alttaki alanın üzerinde göstermek istiyorum.css bilgim var ama bunu nasıl yapabileceğimi kavrayamadım.Yani nasıl bir mantık kullanmalıyız ki alttaki alan hareket etmeden üzerine bir div açalım?Basit bir kod da yeterli olabilir.(veya bir link)Yorumlara baktım da herkesin bir sorunu var.Böyle bir site açtıgın icin tesekkurler.:D
Mehmet Duran 12 Şubat Cuma 2010 22:38 #12
Bu söylediğini yapmak için üst bölümde açılmasını istediğin elementin position özelliğine absolute, fixed gibi değerler verebilirsin. Ayrıca konumlandırma işlemini de yaparak (left, right, top, bottom değerlerini vererek) açılacak alanı istediğin konumda açabilirsin. Tıpkı adresini verdiğin sitedeki örnek gibi.
huseyin 12 Şubat Cuma 2010 23:24 #13
Dediğini yapınca position:absolute ya da fixed o alanı(yani açmak istediğimiz div alanı)sabitlediği için alttaki div alanının(var olan div alanı) üstünde değil altında açılıyor.Yani alttaki alanı kaydırmıyor.(burası güzel.)ama onun altında açılıyor.Sonuc olarak olmadı.Yine de ilgilendiğin için teşekkürler.Daha fazla zamanını almayayım...
Mehmet Duran 12 Şubat Cuma 2010 23:43 #14
Position özelliğini bu şekilde yaptıktan sonra konum (top, left, right, bottom) verilerini de girmelisin. Bu şekilde istediğin alanda elementlerin üstünde ve belirlediğin alanda çıkacaktır. Ancak bazı çakışmalar olabilir. Bunun için css'in z-index özelliğini araştırabilirsin.
huseyin 12 Şubat Cuma 2010 23:51 #15
Dediğin gibi ben de tam şimdi buldum.Buraya yazacaktım isteyenlerin isine yarasın diye.Ama sen zaten çözümü yazmışsın.Buradaki püf nokta z-index değerini vermekten geçiyor.Sorularıma sabırla cevap verdiğin için çok teşekkürler..
Barbaros Alp 24 Şubat Çarşamba 2010 15:51 #16
Merhaba Mehmet, Zamanlama için paylaştığın javascript fonksiyonu için teşekkürler. Normal fonksiyon oluşturmanın dışında değişik bir tanımla yapmışsın. YazKontrol u biraz açıklar mısını? Teşekkürler
Mehmet Duran 24 Şubat Çarşamba 2010 22:35 #17
Merhaba. YazKontrol bir fonksiyon. Burada biraz farklı bir tanımlama yapmamım sebebi ise bu fonksiyona parametre olarak bir fonksiyon vermemiz. Aslında klasik şekilde fonksiyon tanımlayarak da yapabiliriz bunu ama bu şekilde tıpkı jQuery ve diğer script kütüphanelerinde olduğu gibi daha nesnel javascript kodlaması gerçekleştirebiliyoruz.
Ersin 20 Aralık Pazartesi 2010 03:14 #18
Örneğe baktım. Default.aspx/Oku dan çekilen veriler nasıl listeleniyor? Örneğin; UL ve LI olarak mı yoksa BR ile satır satır mı? SUCCESS olarak dönmesi için ne gerekiyor? ASPX sayfadan dönen verilerin html kodları olsa idi örneği kolayca çözüp yararlanabilirdim sanırım. Teşekkürler.
Mehmet Duran 06 Ocak Perşembe 2011 11:13 #19
@Ersin, söylmiş olduğun metot html veri dönderiyor. Bu html veri ise usercontrol'ün render edilmesi ile elde ediliyor. Ajax işlemi başarılı ise jQuery'nin Ajax fonksiyonundaki success eventı devreye giriyor ve burada istekten dönen sonuçlar değerlendiriliyor.
ahmet 21 Şubat Pazartesi 2011 10:58 #20
hocam örnegin çalışan halde veremezmisiniz. şimdi yorumları okuyorumda herkezin baya bir kafası karışmış. yani yapamıyoruz. örnegi görebilirsek. yani kodlarını tam olarak verebilirmisiniz?
Mehmet Duran 08 Nisan Cuma 2011 22:15 #21
@ahmet, örneğin çalışır hali yayında zaten. Olmayan tek kısmı gelen verilerin nereden geldiği ama bunun da bu yazıda bahsedilen konu ile ilgisi yok diye düşünüyorum.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Kimse sana senden iyi öğüt veremez.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009