Jak ustawić opóźnienie czasowe w javascript

Użyj setTimeout():

var delayInMilliseconds = 1000; //1 second

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

Jeśli chcesz to zrobić bez setTimeout: Odnieś się do tego pytania.

setTimeout(function(){

}, 500); 

Umieść swój kod wewnątrz { }.

500 = 0,5 sekundy

2200 = 2.2 sekundy

itd.

Istnieją dwa (najczęściej używane) typy funkcji timera w javascript setTimeout i setInterval (other)

Obie te metody mają ten sam podpis. Przyjmują one funkcję wywołania zwrotnego i czas opóźnienia jako parametr.

setTimeout wykonuje się tylko raz po opóźnieniu, podczas gdy setInterval kontynuuje wywoływanie funkcji zwrotnej po każdym milisekundowym opóźnieniu.

Obie te metody zwracają identyfikator liczby całkowitej, który może być użyty do wyczyszczenia ich przed wygaśnięciem timera.

Obie te metody pobierają identyfikator liczby całkowitej zwrócony z powyższych funkcji setTimeout i setInterval.

Przykład:

setTimeout.

alert("before setTimeout");

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

  alert("after setTimeout");

Jeśli uruchomisz powyższy kod, zobaczysz, że alarmuje on przed setTimeout, a następnie po setTimeout i w końcu alarmuje Jestem setTimeout po 1sec (1000ms).

To co możesz zauważyć w przykładzie to to, że setTimeout(...) jest asynchroniczny, co oznacza, że nie czeka na upłynięcie czasu przed przejściem do następnej instrukcji tj.

Przykład:

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

Jeśli uruchomisz powyższy kod zobaczysz, że alarmuje on przed setInterval a następnie po setInterval w końcu alarmuje I am setInterval 5 razy po 1sec (1000ms) ponieważ setTimeout czyści timer po 5 sekundach lub co 1 sekundę dostaniesz alert I am setInterval w nieskończoność.

**Jak przeglądarka wewnętrznie to robi?

Wyjaśnię to w skrócie.

Aby to zrozumieć musisz wiedzieć o kolejce zdarzeń w javascript. W przeglądarce jest zaimplementowana kolejka zdarzeń. Kiedykolwiek zdarzenie zostanie wywołane w js, wszystkie te zdarzenia (takie jak kliknięcie itp.) są dodawane do tej kolejki. Kiedy przeglądarka nie ma nic do wykonania, pobiera zdarzenie z kolejki i wykonuje je jedno po drugim.

Teraz, kiedy wywołasz setTimeout lub setInterval, twoje wywołanie zwrotne zostanie zarejestrowane do timera w przeglądarce i zostanie dodane do kolejki zdarzeń po upływie podanego czasu i ostatecznie javascript pobierze zdarzenie z kolejki i wykona je.

Dzieje się tak, ponieważ silnik javascript są jednowątkowe i mogą wykonywać tylko jedną rzecz w tym samym czasie. Tak więc, nie mogą one wykonywać innych javascript i śledzić swój timer. Dlatego te timery są zarejestrowane w przeglądarce (przeglądarka nie jest jednowątkowa) i może śledzić timer i dodać zdarzenie do kolejki po wygaśnięciu timera.

To samo dzieje się dla setInterval tylko w tym przypadku zdarzenie jest dodawane do kolejki ponownie i ponownie po określonym odstępie czasu, aż zostanie wyczyszczone lub strona przeglądarki zostanie odświeżona.

Uwaga.

Parametr delay, który przekazujesz do tych funkcji, jest minimalnym opóźnieniem czasu na wykonanie wywołania zwrotnego. Dzieje się tak, ponieważ po wygaśnięciu timera przeglądarka dodaje zdarzenie do kolejki do wykonania przez silnik javascript, ale wykonanie wywołania zwrotnego zależy od twojej pozycji zdarzeń w kolejce, a ponieważ silnik jest jednowątkowy, to będzie wykonywać wszystkie zdarzenia w kolejce jeden po drugim.

Stąd, twój callback może czasami zająć więcej niż określony czas opóźnienia, aby zostać wywołany specjalnie, gdy inny kod blokuje wątek i nie dając mu czas na przetwarzanie tego, co'jest tam w kolejce.

I jak już wspomniałem javascript jest pojedynczym wątkiem. Tak więc, jeśli blokujesz wątek na długo.

Na przykład ten kod

while(true) { //infinite loop 
}

Twój użytkownik może otrzymać komunikat o treści strona nie odpowiada.