Javascript'te zaman gecikmesi nasıl ayarlanır


170

Ben görüntüleri değiştirmek için web sitemde js bir parça var ama resmi ikinci kez tıkladığınızda bir gecikme gerekir. Gecikme 1000 ms olmalıdır. Yani img.jpg'yi tıklarsanız img_onclick.jpg görünür. Daha sonra img_onclick.jpg görüntüsüne tıklarsınız, img.jpg tekrar gösterilmeden önce 1000 ms 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();
    });
});

8
setTimeout(function(){/*YourCode*/},1000);
marteljn


muhtemelen .stop()olsa arıyor . Burada bir göz atın api.jquery.com/stop
Mark Walters

Yanıtlar:


381

Kullanım setTimeout():

var delayInMilliseconds = 1000; //1 second

setTimeout(function() {
  //your code to be executed after 1 second
}, delayInMilliseconds);

Bunu onsuz yapmak istiyorsanız setTimeout: Bu soruya bakın .


6
senkronize nasıl yapılır? setTimeout içindeki kod sınıf özelliklerini tanımıyor.
ishandutta2007

@ ishandutta2007 aşağıdaki cevabımı gör -> stackoverflow.com/a/49813472/3919057
Ninjaneer

50
setTimeout(function(){


}, 500); 

Kodunuzu { }

500 = 0,5 saniye

2200 = 2.2 saniye

vb.


18

ES-6 Çözümü

Aşağıda aync / await kullanan bir örnek kod verilmiştir gerçek bir gecikme .

Birçok kısıtlama var ve bu yararlı olmayabilir, ama sadece eğlenmek için buraya gönderiyorsunuz ..

    async function delay(delayInms) {
      return new Promise(resolve  => {
        setTimeout(() => {
          resolve(2);
        }, delayInms);
      });
    }
    async function sample() {
      console.log('a');
      console.log('waiting...')
      let delayres = await delay(3000);
      console.log('b');
    }
    sample();


3
delayFonksiyonun zaman uyumsuz olması GEREKMEZ . Bu harika gecikme, bir asenkron fonksiyonun gövdesinde normal bir fonksiyon tarafından döndürülen bir Sözün beklenmesi durumunda işe yarar.
Intervoice

13

Javascript setTimeoutve setInterval( diğer ) olmak üzere iki (en çok kullanılan) tür zamanlayıcı işlevi vardır

Her iki yöntemin de imzası vardır. Parametre olarak geri arama işlevi ve gecikme süresi alırlar.

setTimeoutgecikmeden sonra yalnızca bir kez setIntervalyürütülürken, her gecikme milisaniyesinden sonra geri arama işlevini çağırmaya devam eder.

her iki yöntem de zamanlayıcının süresi dolmadan bunları temizlemek için kullanılabilecek bir tamsayı tanımlayıcısı döndürür.

clearTimeoutve clearIntervalher iki yöntem de yukarıdaki işlevlerden döndürülen bir tamsayı tanımlayıcısı alır setTimeoutvesetInterval

Misal:

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 uyarıldığını göreceksiniz before setTimeoutve after setTimeoutson olarak I am setTimeout1sn (1000ms)

Örnekten fark edebileceğiniz şey setTimeout(...), eşzamansız olmasıdır, yani bir sonraki ifadeye geçmeden önce zamanlayıcının geçmesini beklemediği anlamına gelir.alert("after setTimeout");

Misal:

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, uyarı verdiğini görürsünüz before setIntervalve after setIntervalsonunda I am setInterval 1 saniye (1000 ms) sonra 5 kez uyarı verir.I am setInterval .

Tarayıcı nasıl dahili olarak yapar?

Kısaca açıklayacağım.

Javascript'te olay kuyruğu hakkında bilmek zorunda olduğunu anlamak için. Tarayıcıda uygulanan bir olay kuyruğu var. Bir olay js'de tetiklendiğinde, tüm bu olaylar (tıklama vb. Gibi) bu kuyruğa eklenir. Tarayıcınızda yürütülecek hiçbir şey yoksa, bir olayı kuyruktan alır ve tek tek yürütür.

Şimdi, setTimeoutveyasetInterval geri tarayıcıdaki bir zamanlayıcıya kaydedilir ve verilen süre sona erdikten sonra olay kuyruğuna eklenir ve sonunda javascript olayı kuyruktan alır ve yürütür.

Javascript motoru tek iş parçacıklı olduğundan ve her seferinde yalnızca bir şey yürütebildiğinden böyle olur. Böylece, başka bir javascript çalıştıramaz ve zamanlayıcıyı takip edemezler. Bu yüzden bu zamanlayıcılar tarayıcıya kaydedilir (tarayıcı tek iş parçacıklı değildir) ve zamanlayıcıyı izleyebilir ve zamanlayıcı sona erdikten sonra sıraya bir olay ekleyebilir.

Aynı için olur setIntervalo Temizlenen veya tarayıcı sayfası yenilenir kadar olay belirtilen aradan sonra tekrar kuyruğa eklenir bu durumda sadece.

Not

Bu işlevlere ilettiğiniz gecikme parametresi, geri aramayı gerçekleştirmek için gereken minimum gecikme süresidir. Bunun nedeni, zamanlayıcının süresi dolduktan sonra tarayıcının olayı javascript motoru tarafından yürütülecek kuyruğa eklemesi, ancak geri aramanın yürütülmesinin kuyruktaki olay konumunuza bağlı olması ve motorun tek iş parçacıklı olması nedeniyle tüm olayları yürütmesidir. sıra teker teker.

Bu nedenle, geri aramanız bazen diğer kodunuz iş parçacığını engellediğinde ve kuyrukta ne olduğunu işlemek için zaman vermiyorsa, belirli bir gecikme süresinden daha fazla zaman alabilir.

Ve bahsettiğim gibi javascript tek bir ipliktir. Yani, uzun süre ipliği bloke ederseniz.

Bu kodu beğenin

while(true) { //infinite loop 
}

Kullanıcınız sayfanın yanıt vermediğini belirten bir mesaj alabilir .


1
SetTimeout () öğesinin eşzamansız davranışını nasıl durdurabileceğimi söyleyebilir misiniz?
Chandan Purbia

setTimeoutEşzamansız davranış istemiyorsanız kullanmazsınız .
Nadir Laskar

5

Senkronizasyon çağrıları için aşağıdaki yöntemi kullanabilirsiniz:

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

0

Yenilemeye ihtiyacınız varsa, bu başka bir olasılıktır:

setTimeout(function () { 
    $("#jsSegurosProductos").jsGrid("refresh"); 
}, 1000);

0

İşte bu sorunu çözmek için yapıyorum. Bunun zamanlama sorunundan kaynaklandığını ve kodu yürütmek için bir duraklamaya ihtiyaç duyduğunu kabul ediyorum.

var delayInMilliseconds = 1000; 
setTimeout(function() {
 //add your code here to execute
 }, delayInMilliseconds);

Bu yeni kod 1 saniye duraklayacak ve bu arada kodunuzu çalıştıracaktır.


0

Verilerimi vereceğim çünkü ne yaptığımı anlamama yardımcı oluyor.

3 saniyelik bekleme süresine sahip otomatik kaydırma slayt gösterisi yapmak için aşağıdakileri yaptım:

var isPlaying = true;

function autoPlay(playing){
   var delayTime = 3000;
   var timeIncrement = 3000;

   if(playing){
        for(var i=0; i<6; i++){//I have 6 images
            setTimeout(nextImage, delayTime);
            delayTime += timeIncrement;
        }
        isPlaying = false;

   }else{
       alert("auto play off");
   }
}

autoPlay(isPlaying);

SetTimeout () öğesini böyle çalıştırırken; setTimeout'ta (nextImage, delayTime) varsayılan olarak tüm zaman aşımı işlevlerini yürütürler; gecikme süresi statik 3000 milisaniyedir.

Bunu hesaplamak için yaptığım her döngü artımı için her biri sonra ekstra 3000 mili / s eklemek oldu delayTime += timeIncrement; .

Burada ilgilenenler için benim nextImage () nasıl görünüyor:

function nextImage(){
    if(currentImg === 1){//change to img 2
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[1].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[1];
        imgDescription.innerHTML = imgDescText[1];

        currentImg = 2;
    }
    else if(currentImg === 2){//change to img 3
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[2].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[2];
        imgDescription.innerHTML = imgDescText[2];

        currentImg = 3;
    }
    else if(currentImg === 3){//change to img 4
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[3].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[3];
        imgDescription.innerHTML = imgDescText[3];

        currentImg = 4;
    }
    else if(currentImg === 4){//change to img 5
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[4].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[4];
        imgDescription.innerHTML = imgDescText[4];

        currentImg = 5;
    }
    else if(currentImg === 5){//change to img 6
    for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[5].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[5];
        imgDescription.innerHTML = imgDescText[5];

        currentImg = 6;
    }
    else if(currentImg === 6){//change to img 1
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[0].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[0];
        imgDescription.innerHTML = imgDescText[0];

        currentImg = 1;
    }
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.