Web sitemde görüntüleri değiştirmek için bir js parçası var, ancak görüntüye ikinci kez tıkladığınızda bir gecikmeye ihtiyacım var. Gecikme 1000 ms olmalıdır. Yani img.jpg'ye tıkladıktan sonra img_onclick.jpg görünecek. Daha sonra img_onclick.jpg resmine tıklarsınız, img.jpg tekrar gösterilmeden önce 1000 ms'lik bir gecikme olmalıdır.
İşte kod:
jQuery(document).ready(function($) {
$(".toggle-container").hide();
$(".trigger").toggle(function () {
$(this).addClass("active");
$(".trigger").find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg');
}, function () {
$(this).removeClass("active");
$(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
});
$(".trigger").click(function () {
$(this).next(".toggle-container").slideToggle();
});
});
setTimeout()`** işlevini kullanın:
var delayInMilliseconds = 1000; //1 second
setTimeout(function() {
//your code to be executed after 1 second
}, delayInMilliseconds);
Eğer setTimeout
olmadan yapmak istiyorsanız: Bu soruya bakın]1.
Javascriptte
setTimeoutve
setInterval` olmak üzere iki (çoğunlukla kullanılan) tür zamanlayıcı işlevi vardır (other)
Bu yöntemlerin her ikisi de aynı imzaya sahiptir. Parametre olarak bir geri çağırma işlevi ve gecikme süresi alırlar.
setTimeoutgecikmeden sonra yalnızca bir kez yürütülürken,
setInterval` her gecikme milisaniyesinden sonra geri arama işlevini çağırmaya devam eder.
Bu yöntemlerin her ikisi de zamanlayıcı sona ermeden önce bunları temizlemek için kullanılabilecek bir tamsayı tanımlayıcı döndürür.
clearTimeout
ve clearInterval
bu yöntemlerin her ikisi de yukarıdaki setTimeout
ve setInterval
işlevlerinden döndürülen bir tamsayı tanımlayıcı alır
Örnek:
alert("before setTimeout");
setTimeout(function(){
alert("I am setTimeout");
},1000); //delay is in milliseconds
alert("after setTimeout");
Yukarıdaki kodu çalıştırırsanız, setTimeout
tan önce` ve ardından setTimeout
tan sonra` uyarı verdiğini ve son olarak 1sn (1000ms) sonra I am setTimeout
uyarısı verdiğini göreceksiniz
Örnekten de fark edebileceğiniz gibi setTimeout(...)
asenkrondur, yani bir sonraki deyime geçmeden önce zamanlayıcının dolmasını beklemez, yani alert("after setTimeout");
Örnek:
alert("before setInterval"); //called first
var tid = setInterval(function(){
//called 5 times each time after one second
//before getting cleared by below timeout.
alert("I am setInterval");
},1000); //delay is in milliseconds
alert("after setInterval"); //called second
setTimeout(function(){
clearInterval(tid); //clear above interval after 5 seconds
},5000);
Yukarıdaki kodu çalıştırırsanız, setInterval'den önce before setInterval
uyarısı verdiğini ve ardından after setInterval
son olarak 1sn (1000ms) sonra 5 kez I am setInterval
uyarısı verdiğini göreceksiniz çünkü setTimeout 5 saniye sonra zamanlayıcıyı temizler, aksi takdirde her 1 saniyede bir I am setInterval
Sonsuz uyarısı alırsınız.
**Tarayıcı bunu dahili olarak nasıl yapar?
Kısaca açıklayacağım.
Bunu anlamak için javascript'te olay kuyruğu hakkında bilgi sahibi olmanız gerekir. Tarayıcıda uygulanan bir olay kuyruğu vardır. Js'de bir olay tetiklendiğinde, bu olayların tümü (tıklama vb. gibi) bu kuyruğa eklenir. Tarayıcınızın yürütecek bir şeyi olmadığında, kuyruktan bir olay alır ve bunları tek tek yürütür.
Şimdi, setTimeout
veya setInterval
dediğinizde, geri aramanız tarayıcıdaki bir zamanlayıcıya kaydedilir ve verilen süre dolduktan sonra olay kuyruğuna eklenir ve sonunda javascript olayı kuyruktan alır ve yürütür.
Bunun nedeni, javascript motorunun tek iş parçacıklı olması ve bir seferde yalnızca bir şey yürütebilmesidir. Yani, başka javascript çalıştıramazlar ve zamanlayıcınızı takip edemezler. Bu nedenle bu zamanlayıcılar tarayıcıya kaydedilir (tarayıcı tek iş parçacıklı değildir) ve zamanlayıcıyı takip edebilir ve zamanlayıcı sona erdikten sonra kuyruğa bir olay ekleyebilir.
Aynı şey setInterval
için de geçerlidir, ancak bu durumda olay, belirtilen aralıktan sonra temizlenene veya tarayıcı sayfası yenilenene kadar tekrar tekrar kuyruğa eklenir.
Not
Bu fonksiyonlara aktardığınız gecikme parametresi minimum gecikmedir geri çağırmayı yürütme zamanı. Bunun nedeni, zamanlayıcı sona erdikten sonra Tarayıcı, olayı, aşağıdakiler tarafından yürütülmek üzere kuyruğa ekler javascript motorudur, ancak geri aramanın yürütülmesi sizin olayların kuyruktaki konumu ve motor tek iş parçacıklı olduğu için kuyruktaki tüm olayları teker teker yürütecektir.
Bu nedenle, geri aramanızın çağrılması, özellikle diğer kodunuz iş parçacığını bloke ettiğinde ve kuyrukta ne olduğunu işlemesi için zaman vermediğinde, belirtilen gecikme süresinden daha uzun sürebilir.
Ve bahsettiğim gibi javascript tek iş parçacıklıdır. Yani, eğer iş parçacığını uzun süre engellerseniz.
Bu kod gibi
while(true) { //infinite loop
}
Kullanıcınız sayfa yanıt vermiyor şeklinde bir mesaj alabilir.