Java Script ile Metin Kutusuna Yazarken Arama

setTimeOut Fonksiyonu

Bu fonksiyon belirtilen zaman sonunda belirtilen işlemin bir kez çalıştırılmasını sağlar. Kullanımı aşağıdaki gibidir.

setTimeout(işlem, zaman);

İşlem parametresinin yerine bir fonksiyon tanımlanabilir. Tanımlanan bu fonksiyon belirtilen zaman geçtikten sonra çalışır. Mesela:

setTimeOut(arama,1000)

Yukarıdaki kod 1 saniye sonra arama isimli metodu çalıştırır. Zaman kısmına misisaniye cinsinden değer yazılır. İşlem yerine bir fonksiyon belirtilebildiği gibi yeni bir kod bloğu da yazılabilir. Aşağıda olduğu gibi.

setTimeOut(function(){ işlem kodları },10000)

Not : Bu metot belirtilen zaman sonunda, istenen fonksiyonu yalnızca bir kez çalıştırır. setInterval fonksiyonu ile karıştırılmamalıdır.

clearTimeOut Fonksiyonu

Metin kutusuna yazarken arama yapma işleminde kullanılacak bir diğer fonksiyon clearTimeOut fonksiyonudur. Bu fonksiyon zaman setTimeOut fonksiyonunun zaman sayacının sıfırlanmasını sağlar. Mesela 3 saniye sonra tetiklenmek üzere ayarlanan bir setTimeOut nesnesinin sayacını ikinci saniyede tekrar başa almak istiyorsak clearTimeOut fonksiyonunu kullanabiliriz.

var sayac = setTimeOut(arama,3000);

clearTimeOut(nesne);

Yukarıdaki örnekte setTimeOut fonksiyonu zamanlayıcı nesnesini bize döndürür. Dönen nesneyi sayac isimli bir değişkene alırız. Bu zamanı sıfırlamak, başa döndürmek için sayac isimli nesneyi kullanacağız. Sayac isimli nesneyi clearTimeOut fonksiyonuna parametre olarak verirsek ilgili sayaç sıfırlanmış olacaktır. Birden fazla zaman sayacı aynı anda kullanılmak istenebilir. Böyle bir durumda her bir setTimeOut fonksiyonunun döndürdüğü sonuç ayrı bir nesneye alınabilir. Sıfırlanmak istenen sayaç bu nesneler kullanılarak sıfırlanabilir.

JavaScript input Olayı

Bir metin kutusuna yazma işlemi yapıldığı anda tetiklenen olay input olayıdır. Yazarken arama yapmak istiyorsak kodlarımızı input olayına bağlı olarak yazabiliriz. Input olayı metin kutusuna her karakter yazıldığında tetiklenir. Aşağıda arama isimli bir classa sahip bir html input elemanı görülmektedir.

<input type=”text” class=”arama” autofocus placeholder=”Akademik personel arama”>

Yukarıdaki gibi bir input elemanımız varsa bu elemanın input olayına kod yazmak için şöyle bir java script kullanabiliriz.

$(“.arama”).on(“input”, function () {

//input olayında tetiklenecek komutlar

}

});

Metin kutusunu input olayında arama yapabilmek için ilgili olay içinde her yeni karakter eklendiğinde arama yapılması için AramaYap() isimli bir fonksiyonumuzun olduğunu kabul edelim. Her bir karakter eklendiğinde bu fonksiyon çağırılsın.

$(“.aramaMetni”).on(“input”, function () {

var metin = $(“.arama”).val();

AramaYap(metin)

});

Yukarıdaki kod her bir karakter eklendiğinde yeniden tetiklenecektir. Bu durum bir takım sorunları da beraberinde getirir. Kullanıcı tuş takımı ile yazmaya devam ederken her yazdığı harf için arama metodu tekrar tekra çalışacaktır. Bu da gereksiz çalışma ve iş yükü demektir. Kullanıcı yazmayı bıraktığı anda AramaYap() fonksiyonunun çalışması daha uygun bir çözüm olacaktır. Böylece kullancı tuş takımı ile yazmayı bıraktıktan sonra bir kez arama yapılacaktır. Bunu sağlamak için setTimeOut ve clearTimeOut fonksiyonlarını birlikte kullanabiliriz. Tıpkı aşağıda olduğu gibi.

var aramaBekleme=null;

$(“.arama”).on(“input”, function () {

if (aramaBekleme) {

clearTimeout(aramaBekleme);

aramaBekleme = null;

}

var metin = $(“.arama”).val();

aramaBekleme = setTimeout(function ()

{

if (metin.length >= 3) {

AramaYap($(“.arama”).val());

}

},400)

});

Yukarıdaki kod her bir harf yazma işleminde tetiklenir. Ancak her harf yazıldığında arama yapmaz. Arama yapılması için kullanıcının en az 400 milisaniye kadar yazma işlemine ara vermesi gerekir. Bu işlem için aramaBekleme isimli bir nesne tanımladık. Bu nesne bizim zaman sayacımızdır. Başlangıçta bu nesne null olarak tanımlanır. Her tuşa basıldığında bu nesne null olarak ayarlanır. Ayrıca clearTimeOut fonksiyonu ile zaman sıfırlanır. Eğer tuşa basıldığı anda aramaBekleme null ise o zaman setTimeOut fonksiyonu tetiklenir ve zaman sayılmaya başlar. Zaman sayılırken tekrar tuşa basılırsa

if (aramaBekleme) {

clearTimeout(aramaBekleme);

aramaBekleme = null;

}

komutu çalışır ve zaman sayacı tekrar sıfırlanır. Buradaki if kontrolü ilk harf metin kutusuna yazılırken setTimeOut tetiklenmeden önce sayaç nesnemiz null olduğu için zaman sıfırlanırken hataya sebep olmamak için null değilse zaman sayacını sıfırla anlamındadır.

setTimeOut fonksiyonu belirtilen zaman sonunda yalnız bir kez çalışır. Tekrar tekrar çalışmaz.