Come impostare il ritardo in javascript

Question

Ho questo pezzo di js nel mio sito Web per cambiare le immagini ma ho bisogno di un ritardo quando si fa clic sull'immagine una seconda volta. Il ritardo dovrebbe essere 1000ms. Quindi fai clic su img.jpg, quindi apparirà img_onclick.jpg. Dovresti quindi cliccare sull'immagine img_onclick.jpg ci dovrebbe essere un ritardo di 1000ms prima che l'img.jpg venga mostrato di nuovo.

Ecco il codice:

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(); 
    }); 
}); 

Answer 1

Usa setTimeout():

var delayInMilliseconds = 1000; //1 second 

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

Se si vuole fare senza setTimeout: Fare riferimento a this question.

Answer 2

setTimeout(function(){ 


}, 500); 

inserire il codice all'interno del { }

500 = 0,5 secondi

2200 = 2,2 secondi

ecc

Answer 3

Ci sono due (per lo più utilizzati) tipi di timer funzione in javascript setTimeout e setInterval (other)

Entrambi questi metodi hanno la stessa firma. Prendono una funzione di richiamata e un tempo di ritardo come parametro.

setTimeout esegue una sola volta dopo il ritardo mentre setInterval continua a richiamare la funzione di richiamata dopo ogni ritardo di millisecondi.

entrambi questi metodi restituiscono un identificativo intero che può essere utilizzato per cancellarli prima che il timer scada.

clearTimeout e clearInterval entrambi questi metodi prendono un identificatore intero restituito da funzioni di cui sopra setTimeout e setInterval

Esempio:

setTimeout

alert("before setTimeout"); 

setTimeout(function(){ 
     alert("I am setTimeout"); 
    },1000); //delay is in milliseconds 

    alert("after setTimeout"); 

Se si esegue il codice di cui sopra vedrai che avvisa before setTimeout e poi after setTimeout infine avverte I am setTimeout dopo 1 secondo (1000 ms)

Cosa si può notare dall'esempio è che la setTimeout(...) è asincrona che significa che non aspetta che il timer per essere trascorso prima andando alla prossima dichiarazione i.e alert("after setTimeout");

Esempio:

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); 

Se si esegue il codice di cui sopra si vedrà che avvisa before setInterval e poi after setInterval infine avverte I am setInterval 5 volte dopo 1 sec (1000 ms) perché il setTimeout cancella il timer dopo 5 secondi o ogni 1 secondo riceverai un avviso I am setInterval Infinitamente.

Come fa internamente il browser?

Spiegherò in breve.

Per capire che devi conoscere la coda degli eventi in javascript. C'è una coda di eventi implementata nel browser. Ogni volta che un evento viene attivato in js, tutti questi eventi (come il clic, ecc.) Vengono aggiunti a questa coda. Quando il tuo browser non ha nulla da eseguire, prende un evento dalla coda e li esegue uno per uno.

Ora, quando si chiama setTimeout o setInterval il callback ottenere registrato ad un timer nel browser e che viene aggiunto alla coda degli eventi dopo il tempo determinato scade e infine javascript prende l'evento dalla coda e lo esegue.

Questo succede perché il motore javascript è a thread singolo e possono eseguire solo una cosa alla volta. Quindi, non possono eseguire altri javascript e tenere traccia del tuo timer. Questo è il motivo per cui questi timer sono registrati con il browser (il browser non è a thread singolo) e può tenere traccia del timer e aggiungere un evento in coda dopo la scadenza del timer.

stesso caso per setInterval solo in questo caso l'evento viene aggiunto alla coda ancora e ancora dopo l'intervallo specificato fino a quando non viene cancellato o la pagina del browser viene aggiornata.

Nota

Il parametro di ritardo si passa a queste funzioni è il minimo ritardo tempo per eseguire il callback. Questo perché dopo lo scadere del timer il browser aggiunge l'evento alla coda che deve essere eseguito dal motore javascript ma l'esecuzione della richiamata dipende dalla posizione degli eventi nella coda e poiché il motore è a thread singolo verrà eseguito tutti gli eventi in coda uno per uno.

Di conseguenza, la richiamata può talvolta richiedere più del tempo di ritardo specificato da chiamare in particolare quando l'altro codice blocca il thread e non gli dà il tempo di elaborare ciò che è presente nella coda.

E come ho detto javascript è single thread. Quindi, se blocchi il thread per molto tempo.

Ti piace questa codice

while(true) { //infinite loop 
} 

tuo utente può ottenere un messaggio che dice pagina non risponde.

Answer 4

Se avete bisogno di rinfrescare, questo è un altro possibilita ':

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