Javascript'te zaman gecikmesi nasıl ayarlanır

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();
    });
});
Manoj Sharma
Edited question 2017ööp56öö9 Haziran 2017 в 9:56
Programlama
javascript jquery
2013ösp13ös14 Temmuz 2013 в 2:13
15 görünümler
Çözüm

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.

jegtugado
Edited answer 2017ööp21öö2 Ekim 2017 в 2:21
Yorumlar (2)
 
setTimeout(function(){

}, 500);

Kodunuzu { } içine yerleştirin

500` = 0,5 saniye

2200` = 2,2 saniye

vs.

maudulus
Edited answer 2016ösp17ös20 Kasım 2016 в 8:17
Yorumlar (0)

JavascripttesetTimeoutvesetInterval` 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:

setTimeout

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, setTimeouttan önce` ve ardından setTimeouttan 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:

setInterval

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.

Nadir Laskar
Edited answer 2017ööp37öö6 Haziran 2017 в 6:37
Yorumlar (2)