JavaScript
Interwały i limity czasu

Składnia

• timeoutID = setTimeout (function () {}, milisekundy)
• Interwał ID = setInterval (function () {}, milisekundy)
• timeoutID = setTimeout (function () {}, milisekundy, parametr, parametr, ...)
• Interwał ID = setInterval (function () {}, milisekundy, parametr, parametr, ...)
• clearTimeout (timeoutID)
• clearInterval (validID)

Uwagi

Interwały

function waitFunc(){
    console.log("This will be logged every 5 seconds");
}

window.setInterval(waitFunc,5000);

Usuwanie interwałów

window.setInterval() zwraca IntervalID , którego można użyć, aby zatrzymać ten interwał przed kontynuowaniem. Aby to zrobić, zapisz wartość zwracaną przez window.setInterval() w zmiennej i wywołaj clearInterval() z tą zmienną jako jedynym argumentem:

function waitFunc(){
    console.log("This will be logged every 5 seconds");
}    

var interval = window.setInterval(waitFunc,5000);

window.setTimeout(function(){
    clearInterval(interval);
},32000);

To się rejestruje This will be logged every 5 seconds co 5 sekund, ale zatrzyma je po 32 sekundach. Tak więc wiadomość zostanie zarejestrowana 6 razy.

Usuwanie limitów czasu

window.setTimout() zwraca TimeoutID , którego można użyć do zatrzymania tego limitu czasu. Aby to zrobić, zapisz wartość zwracaną przez window.setTimeout() w zmiennej i wywołaj clearTimeout() z tą zmienną jako jedynym argumentem:

function waitFunc(){
    console.log("This will not be logged after 5 seconds");
}
function stopFunc(){
    clearTimeout(timeout);
}

var timeout = window.setTimeout(waitFunc,5000);
window.setTimeout(stopFunc,3000);

Nie spowoduje to zarejestrowania komunikatu, ponieważ stoper jest zatrzymywany po 3 sekundach.

Recursive setTimeout

Aby powtarzać funkcję w nieskończoność, setTimeout można wywoływać rekurencyjnie:

function repeatingFunc() {
    console.log("It's been 5 seconds. Execute the function again.");
    setTimeout(repeatingFunc, 5000);
}

setTimeout(repeatingFunc, 5000);

W przeciwieństwie do setInterval , zapewnia to, że funkcja będzie działać, nawet jeśli czas działania funkcji jest dłuższy niż określone opóźnienie. Nie gwarantuje to jednak regularnego odstępu czasu między wykonywaniem funkcji. To zachowanie jest również różne, ponieważ wyjątek przed wywołaniem rekurencyjnym setTimeout zapobiegnie ponownemu powtórzeniu, podczas gdy setInterval powtórzy się w nieskończoność bez względu na wyjątki.

setTimeout, kolejność operacji, clearTimeout

setTimeout

• Wykonuje funkcję po odczekaniu określonej liczby milisekund.
• służy do opóźniania wykonania funkcji.

Składnia: setTimeout(function, milliseconds) lub window.setTimeout(function, milliseconds)

Przykład: ten przykład wyświetla „hello” na konsoli po 1 sekundzie. Drugi parametr jest w milisekundach, więc 1000 = 1 sekunda, 250 = 0,25 sekund itp.

setTimeout(function() {
    console.log('hello');
}, 1000);

Problemy z setTimeout

jeśli używasz metody setTimeout w pętli for :

for (i = 0; i < 3; ++i) {
  setTimeout(function(){
    console.log(i);
  }, 500);
}

Spowoduje to wyświetlenie wartości 3 three razy, co nie jest poprawne.

Obejście tego problemu:

for (i = 0; i < 3; ++i) {
  setTimeout(function(j){
    console.log(i);
  }(i), 1000);
}

Wygeneruje wartość 0 , 1 , 2 . Tutaj przekazujemy i do funkcji jako parametr ( j ).

Kolejność operacji

Dodatkowo, z uwagi na fakt, że JavaScript jest jednowątkowy i wykorzystuje globalną pętlę zdarzeń, setTimeout może być użyty do dodania elementu na końcu kolejki wykonawczej poprzez wywołanie setTimeout z zerowym opóźnieniem. Na przykład:

setTimeout(function() {
    console.log('world');
}, 0);

console.log('hello');

Faktycznie wyświetli:

hello
world

Również zero milisekund tutaj nie oznacza, że funkcja wewnątrz setTimeout wykona się natychmiast. Zajmie to nieco więcej, w zależności od elementów do wykonania pozostających w kolejce wykonania. Ten jest właśnie wypychany na koniec kolejki.

Anulowanie limitu czasu

clearTimeout (): zatrzymuje wykonywanie funkcji określonej w setTimeout()

Składnia: clearTimeout (timeoutVariable) lub window.clearTimeout (timeoutVariable)

Przykład:

var timeout = setTimeout(function() {
    console.log('hello');
}, 1000);

clearTimeout(timeout); // The timeout will no longer be executed

Interwały

Standard

Nie musisz tworzyć zmiennej, ale jest to dobra praktyka, ponieważ możesz użyć tej zmiennej z clearInterval, aby zatrzymać aktualnie działający interwał.

var int = setInterval("doSomething()", 5000 ); /* 5 seconds */
var int = setInterval(doSomething, 5000 ); /* same thing, no quotes, no parens */

Jeśli potrzebujesz przekazać parametry do funkcji doSomething, możesz przekazać je jako dodatkowe parametry poza dwoma pierwszymi do ustawienia setInterval.

Bez nakładania się

setInterval, jak wyżej, będzie uruchamiany co 5 sekund (lub cokolwiek ustawisz) bez względu na wszystko. Nawet jeśli funkcja doSomething działa dłużej niż 5 sekund. To może powodować problemy. Jeśli chcesz tylko upewnić się, że istnieje przerwa między uruchomieniami doSomething, możesz to zrobić:

(function(){

   doSomething();

   setTimeout(arguments.callee, 5000);

})()